jquery自动补全

1. 页面加载就获取然后用户输入匹配提前加载的数据
2.根据用户输入到数据库查找匹配的数据显示上来

前三个框都是属于第一种
最后一个框模拟百度 google

<!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://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css" /><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自动补全相关推荐

jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
html 输入框自动缩短一行内显示,JQuery UI组合框自动补全功能改进版（即时全部显示+input内容保存）...
JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用,最近一个项目正好用到,仔细研究了下组合框(combobox)的自动补全部分,官方地址是:https://jq ...
JQuery AutoComplete插件实现自动补全
JQuery AutoComplete插件实现自动补全官网 jquery提供的这个插件确实强大,十几行代码就可以实现自动补全功能,而且还可以选择多种不同的数据源,可以说是非常方便. 此文还查阅了一些 ...
jQuery邮箱自动补全
jQuery各种宽度和高度的获取: width()/height():获取元素的宽/高. innerWidth()/innerHeight():获取元素的宽/高(包括内边距). outerWidth( ...
html邮箱下拉栏,jQuery实现邮箱下拉列表自动补全功能
记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填 ...
JS实现在输入框内输入@时，邮箱账号自动补全
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8&quo ...
asp.net + ajax + sqlserver 自动补全功能,asp.net+ajax+sqlserver自动补全功能实现解析
代码下载说明:数据库连接字符串在web.config文件中,为方便运行使用的是官方的Northwind数据库. 参考(向其作者致敬): ² http://www.loveweb8.com/plus/ ...
通过SublimeCodeIntel设置JavaScript自动补全
1.首先安装SublimeCodeIntel包. 进入sublime,通过Ctrl+Shift+P进入包管理,输入pci(首字母),选择Package Contrl:Intall Package,如图 ...
【Bootstrap】 typeahead自动补全
typeahead 这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用. Bootstrap提供typeahead组件来完成自动补全功能. 两种用法: 直接给标签添加属性 &l ...

jquery自动补全

jquery自动补全相关推荐

最新文章

热门文章