类似百度搜索文本框效果—自动补全+功能扩展

用过百度或者其他搜索站点的人,一定都看到过下面的效果。

类似百度搜索文本框效果—自动补全+功能扩展_第1张图片
百度.gif
  • 首先分析下这个是个什么样的需求:
  1. 在文本框中输入一个字母,在文本框下方会出现一个提示文字列表,列出了几个包含该字母的关键词;
  2. 再继续输入,提示的文字列表中的关键词更加精确;
  • 可能你一眼看到上面的gif,就想到了jquery-ui的autocomplete功能。的确,我今天实现这个效果也是用这个插件,但是不仅仅是它的基础用法。

下面是这个插件的各种用法

  • 环境准备
jquery.min.js
jquery-ui.min.js
jquery-ui.min.css
  • 最简单的用法


    类似百度搜索文本框效果—自动补全+功能扩展_第2张图片
    最简单的.gif
说明:初始化数据,后期只是在第一次数据的范围内补全填充
code: 
 html:
  
js: $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); });
缺点:
  1. 数据需要第一次就全部传来,但是如果我们初始化数据有2000条,我不可以一次性查出来,赋值给数据源数组;
  2. 下面的场景就不能实现:我们需要用户选择公司现有的员工姓名,虽然文本框中显示的是用户名,但是我们需要同时将该员工的id赋值给文本框的一个属性(虽然用户看不到);
  3. 如果有同名的员工,用户在下拉选择时如何确定选哪一个呢?
  • 解决上面提出的3个问题的解决办法
    1. 监听用户的操作,当用户每输入一个字符,重新请求接口,替换数据源数组;
    2. 控制,用户选择通过上下选择列表中的数据时,做额外的自定义操作,保存需要的数据;
  1. 文本框下出现的自动补全列表中,自定义显示格式,比如姓名+手机号或者职位名称等等;
效果:
类似百度搜索文本框效果—自动补全+功能扩展_第3张图片
综合解决方案.gif
你看:
  1. 自动补全的是用户名+手机号;
  2. 选择后,用户id也赋值给了文本框的某个属性;
  3. 当然通过监听文本框的keydown事件,也实现了数据源的更新;

具体代码就不贴出来了,方案就是上面说的思路。实现需要依赖jquery-ui-autocomplete的这个扩展 。

你可能感兴趣的:(类似百度搜索文本框效果—自动补全+功能扩展)