通过JQUERY实现的搜索栏智能下拉菜单查询选择功能

稿源：互联网 2018-09-13 02:00:08 点击： 17538 撤稿纠错

1. 页面加载就获取然后用户输入匹配提前加载的数据；2.根据用户输入到数据库查找匹配的数据显示上来。前三个框都是属于第一种，最后一个框模拟百度 google

以下讨论的是和百度 google 搜索智能下拉菜单查询相关的通过JQUERY实现的搜索栏智能下拉菜单查询选择功能教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>jQuery UI Autocomplete - Default functionality</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://www.alixixi.com/script/jquery-1.8.3.min.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

 <script>
 $(function() {
  var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL高",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Per高l",
  "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;
    }) );
   }
  });

  //利用ajax页面加载就获取到数据源
  function DataSouce1()
  {
   var mycars=new Array()
   for (var i = 0; i <100; i++) {
    mycars[i]="高"+i;
   };
   return mycars;
  }

  //利用ajax根据输入的到数据库查找 相当于
  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>

关于通过JQUERY实现的搜索栏智能下拉菜单查询选择功能的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018091389193.shtml方便下次再访问哦。

·上一篇： 完美的文字垂直居中于div图层中间，兼容多浏览器并支持浮动特效代码
·下一篇： 从天涯网扒下的始终飘游在网页的底部浮动工具栏js特效！

通过JQUERY实现的搜索栏智能下拉菜单查询选择功能

文章分类LIST >>返回首页

最新游戏

最新新闻