1、添加CSS和JS引用

<script type="text/javascript" src="javascript/jquery-1.7.min.js"></script>
<link rel="stylesheet" href="javascript/menuui/jquery-ui.css" >
<script src="javascript/autocomplete/jquery.ui.core.js"></script>
<script src="javascript/autocomplete/jquery.ui.widget.js"></script>
<script src="javascript/autocomplete/jquery.ui.position.js"></script>
<script src="javascript/autocomplete/jquery.ui.menu.js"></script>
<script src="javascript/autocomplete/jquery.ui.autocomplete.js"></script>

2、在某些使用DIV并设置了z-index的页面里使用可能需要重写css的内容

<style type="text/css">.ui-autocomplete{display:block;z-index:99999;width: 200px;}
</style>

3、页面初始化后绑定事件

 1 $( "#vip_code" ).autocomplete({
 2             source: function(request, response){
 3                 $.ajax({
 4                     type : "POST",
 5                     url :"<%=basePath%>" + "/xfz/customer.do",
 6                     data : "action=autoSearch&key="+$("#vip_code").val(),
 7                     dataType : "json",
 8                     success : function(jsonObj) {
 9                         response(jsonObj);
10                     }
11                 });
12             },
13             minLength:2, //至少得有2个字符才能触发自动匹配的动作
14             select: function( event, ui ) {
15                 $("#customer_name").val(ui.item.name);
16             }
17         })
18         .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
19             return $( "<li>" )
20                 .append( "<a style='font-size:12px;font-family: 微软雅黑;'>" + item.value + "," + item.name + "," + item.mobilephone + "</a>" )
21                 .appendTo( ul );
22         };

后台返回给前台的是一个如下结构的对象list

 1 public class CustomerAutoInfo {
 2     //value is key value(vipcode/username)
 3     private String value;
 4     private String name;
 5     private String mobilephone;
 6
 7     public String getValue() {
 8         return value;
 9     }
10     public void setValue(String value) {
11         this.value = value;
12     }
13     public String getName() {
14         return name;
15     }
16     public void setName(String name) {
17         this.name = name;
18     }
19     public String getMobilephone() {
20         return mobilephone;
21     }
22     public void setMobilephone(String mobilephone) {
23         this.mobilephone = mobilephone;
24     }
25 }

4.HTML代码

VIP信息员编码 <input type="text" id="vip_code"  onkeydown='return checkNum()' style="ime-mode:Disabled" onpaste="return !clipboardData.getData('text').match(/\D\./)"  ondragenter="return false" class="searchinput" /><label for="customer_name" style="width: 100px;text-align: right;">消费者姓名</label><input type="text" id="customer_name"  onkeydown="if(event.keyCode==32) return false" class="searchinput" />

达到的结果是在VIP信息员编码上输入超过2个数字后提示与之匹配的信息员的   编码,名字,电话号码 信息提示框 供选择,选择完成后自动填充名字的input。

更多详细的用法请参考Jquery-ui的官方文档

基于Jquery-ui的自动补全相关推荐

  1. jQuery搜索框自动补全功能插件实现-autocomplete.js

    最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

  2. html 输入框自动缩短 一行内显示,JQuery UI组合框自动补全功能改进版(即时全部显示+input内容保存)...

    JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用,最近一个项目正好用到,仔细研究了下组合框(combobox)的自动补全部分,官方地址是:https://jq ...

  3. JQueryUI自动补全 搜索提示实践

    最近在做航运运价平台,有一个业务逻辑是需要在搜索的时候有搜索提示的,没法子,没写过,在找了很久解决方案还没有找到,快崩溃了的时候,忽然发现了jquery UI 的自动补全机制,完全符合啊,大救星. 首 ...

  4. 搜索框自动补全(模糊匹配)功能实现

    本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考 首先贴出的是JQuery Ui 的自动补 ...

  5. vs代码补全的快捷键_效率工具 | 一款基于深度学习的代码自动补全神器

    前言 代码补全对于大多数开发人员来说是至关重要的,它可以有效的提高开发效率.减少拼写错误和输入代码量.我们使用的大多数开发工具都自带补全功能,或者可以通过安装插件具备补全功能.但是,以往的代码补全功能 ...

  6. vs代码补全的快捷键_一款Python编程的自动补全插件神器——kite

    最近发现了一款Python编程的插件神器--kite,相见恨晚啊,它是一款基于AI技术的自动补全功能插件,可用于大部分的Python编程环境,如PyCharm.VSCode.Vim.Sublime T ...

  7. 邮箱自动补全 + 上下翻动

    [jquery]邮箱自动补全 + 上下翻动 最近在做通行证项目,里面注册模块有邮箱注册,需求方想要在输入 @ 后触发下拉框显示各个邮箱,效果如下: html 代码: <!DOCTYPE HTML ...

  8. JQuery AutoComplete插件实现自动补全

    JQuery AutoComplete插件实现自动补全 官网 jquery提供的这个插件确实强大,十几行代码就可以实现自动补全功能,而且还可以选择多种不同的数据源,可以说是非常方便. 此文还查阅了一些 ...

  9. html邮箱下拉栏,jQuery实现邮箱下拉列表自动补全功能

    记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填 ...

  10. jQuery邮箱自动补全

    jQuery各种宽度和高度的获取: width()/height():获取元素的宽/高. innerWidth()/innerHeight():获取元素的宽/高(包括内边距). outerWidth( ...

最新文章

  1. CDataBaseEngineSink::OnRequestPlatformParameter 数据库异常:查询超时已过期 [ 0x80040e31 ]...
  2. 日常总结:自学操作系统基础的一些领悟
  3. 华为鸿蒙测试结果,华为鸿蒙OS系统测试结果相继出炉!果然没让花粉们久等:最好的体验...
  4. jQuery源码解读
  5. cookies丢失 同域名_后端设置Cookie前端跨域获取丢失问题(基于springboot实现)
  6. 【渝粤题库】广东开放大学 质量管理 形成性考核 (2)
  7. 对象过滤某个属性 循环 php_37道PHP面试题(附答案)
  8. MySql 一条普通的查询语句 你知道如何优雅的使用 前缀索引、索引下推优化查询速度吗?
  9. Spring整合Mybatis之关联查询示例
  10. 红橙Darren视频引申 第一次写NDK项目(Android studio 4.1.1)
  11. emacs的配色方案
  12. 举例HTML的图像标记,教案html之css滤镜及练习层div块及span标记举例窗口内例题演示功能的实现总结.pdf...
  13. 数据--第25课 - 队列课后练习
  14. 计算机总是重启是怎么回事,电脑老是重启怎么办?重启原因分析及解决方法
  15. KindEditor的使用
  16. open-drain和push-pull的上拉速度
  17. 华师大计算机专业怎么样,2019年二本科班上岸华东师范大学计算机学硕,初试387分排名第四初复试经验分享!...
  18. ubuntu安装wine版微信
  19. 写给想学Linux系统的人
  20. python英文分句_英文分句

热门文章

  1. 河南大学计算机期末考试题,河南大学计算机与信息工程学院2008期末C#试题
  2. 接口协议之抓包分析 TCP 协议
  3. 没有5年测开经验,还真说不清Python生成器、迭代器、装饰器
  4. devops+备份mysql_使用Xtrabackup备份 MySQL 数据库
  5. xp虚拟服务器设置,VMWare的XP虚拟机网络设置
  6. 3.7.2 - Escape Sequences
  7. MATLAB中的曲线拟合
  8. seaborn-heatmap
  9. [java]内部类的总结
  10. java exception信息_可能通过Java Exceptions暴露敏感信息?