关于jquery搜索补全问题

最新推荐文章于 2020-04-29 23:59:22 发布

想飞翔的猪

最新推荐文章于 2020-04-29 23:59:22 发布

阅读量527

点赞数

文章标签： java jquery

本文链接：https://blog.csdn.net/u011722519/article/details/18054997

版权

首先说明下，这篇文章是参考了网上的内容，自己总结了下再写的。。。。

需求：类似于百度搜索的提示

对于很多人来说，不限该考虑繁琐的逻辑，其实对于jquery来说，这个已经是封装好了的，

先看个例子代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI 自动完成示例</title>
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-2.0.3.js"></script>
<script src="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>

其中的ui.css、ui.js下载地址：http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css、http://code.jquery.com/ui/1.10.3/jquery-ui.js

剩下的那个js就是我们平常用到的js，一般的都支持。

参考地址：http://www.codefans.net/jscss/code/4276.shtml

现在发现个问题：在我使用ajax来获取这个data数据的时候，一定要记得，因为ajax默认的是异步提交，所以，在返回这个data的时候，一定要记得把 async:false这样，就会把返回值是空的问题得到解决，否则这个data会老是返回之前的定义而不是返回ajax请求后返回的数据。

想飞翔的猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于jquery搜索补全问题

首先说明下，这篇文章是参考了网上的内容，自己总结了下再写的。。。。需求：类似于百度搜索的提示对于很多人来说，不限该考虑繁琐的逻辑，其实对于jquery来说，这个已经是封装好了的，先看个例子代码：jQuery UI 自动完成示例$(function() { var availableTags = [ "ActionScript",
复制链接

扫一扫