类似百度搜索栏的即输即更新下拉关键字的效果

最新推荐文章于 2022-11-18 10:30:00 发布

SAFER2016

最新推荐文章于 2022-11-18 10:30:00 发布

阅读量424

点赞数

分类专栏： C# ajax

C# ajax 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<!--脚本中使用的jquery分js，ui，css三部分，另外版本也要对上，其它版本我测试是没成功-->
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>jQuery UI Autocomplete - Default functionality</title>
 <link rel="stylesheet" href="jquery-ui1103.css" />
 <script src="jquery-1.9.1.js"></script>
 <script src="jquery-ui1103.js"></script>

 <script>
 $(function() {
  var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Sche"
  ];

  $( "#tags1" ).autocomplete({
   source: availableTags
  });

  $("#tags2").autocomplete({
   source: ["a", "b", "c"]
  });


  $("#tags3").autocomplete({
   source: DataSouce1()
  });
 

  $("#tags4").autocomplete({
   source: function( request, response ) {
    var name=$.ui.autocomplete.escapeRegex( request.term );
    response( $.grep( DataSouce2(name), function( item ){
     return  item;
    }) );
   }
  });

 
  function DataSouce1()
  {
   var mycars=new Array()
   for (var i = 0; i <100; i++) {
    mycars[i]=""+i;
   };
   return mycars;
  }


  function DataSouce2(name)
  {
   var mycars=new Array()
   for (var i = 0; i <100; i++) {
    mycars[i]=name+"_"+i;
   };
   return mycars;
  }

 });
</script>
</head>
<body>
 <div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags1" />
  <input id="tags2" />
  <input id="tags3" />
  <input id="tags4" />
 </div>
</body>
</html>