jQuery UI Autocomplete自动匹配搜索

来源：互联网发布：mac系统下载官网编辑：程序博客网时间：2024/05/18 01:06

基本代码如下：

http://jqueryui.com/autocomplete/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</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>
</head>
<body>
 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
 
<script>

$(function() {
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
url = 'http://localhost/search/a.php';
$( "#autocomplete" ).autocomplete({ 
source:url//请求后台测试
//source:tags//当前数据测试

});
});


</script>
</body>
</html>

这里要注意，“当前数据测试” 和 “请求后台测试” 是不同的，当前数据测试会自动匹配有的结果，而后台测试会把后台的输出都显示出来不再做匹配。如果要再自动匹配需要手动加代码。

从逻辑上来说也是可以行的通的，因为后台只会返回正确的结果，所有规则交给后台处理就行了。

$(function() {
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
url = 'http://localhost/vlc/38/search/a.php';
$( "#autocomplete" ).autocomplete({ 
//http://webnoties.blog.163.com/blog/static/183525141201310215820483/
 source: function(request, response) {
// var urls = url + request.term; //request.term为当前文本框输入的字符
//这里也可以再定义其他的参数如id//request.id = 55;

 //console.log(request.term);
//主要是这里的response，从api手册上就能看出 需要传事件参数和ui，这样就有了最大的灵活性，想传什么事件自己增加就行，然后返回的数据想怎么处理自己处理就可以了。。  但记住最后要return返回数据。
response($.get(url, function(data){
// alert("Data Loaded: " + data);
//console.log(data);
return data;
})
);
 }
 
});
});

上面的好象请求不到数据。。。于是，先ajax看下

$( "#tags" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "sql/sqlgetWebsqlDataBaseInforAjax",
                    dataType: "json",
                    data:{
                        searchDbInforItem: request.term
                    },
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                dbId:item.dbid,
                                jdbcUrl:item.jdbcUrl,
                                ip:item.ip,
                                port:item.port,
                                sch:item.sch,
                                username: item.username,
                                password:item.password,
                                value: item.labelview
                            }
                        }));
                    }
                });
            },
            minLength: 1,
            select: function( event, ui ) {
                $("#dbInforDdId").val(ui.item.dbId);
                $("#dbInforDdjdbcUrl").val(ui.item.jdbcUrl);
                $("#dbInforIp").val(ui.item.ip);
                $("#dbInforPort").val(ui.item.port);
                $("#dbInforSch").val(ui.item.sch);
                $("#dbInforUserName").val(ui.item.username);
                $("#dbInforPassword").val(ui.item.password);
            }
        });

以下引用：

http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html

jQuery UI Autocomplete是jQuery UI的自动完成组件，是我用过的最强大、最灵活的Autocomplete，它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据。

支持的数据源

jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。

普通的Array格式没有什么特殊的，如下：

["cnblogs","博客园","囧月"]

对于JSON格式的Array，则要求有：label、value属性，如下：

[{label: "博客园", value: "cnblogs"}, {label: "囧月", value: "囧月"}]

其中label属性用于显示在autocomplete弹出菜单，而value属性则是选中后给文本框赋的值。

如果没有指定其中一个属性则用另一个属性替代(即value和label值一样)，如下：

[{label: "cnblogs"}, {label: "囧月"}]

[{value: "cnblogs"}, {value: "囧月"}]

如果label和value都没有指定，则无法用于autocomplete的提示。

另外需要注意，对于从服务器端输出的JSON的key必须用双引号，如下：

[{"label": "博客园", "value": "cnblogs"}, {"label": "囧月", "value": "囧月"}]

否则可能会出现parsererror错误。

主要的参数

jQuery UI Autocomplete常用的参数有：

Source：用于指定数据来源，类型为String、Array、Function

String：用于ajax请求的服务器端地址，返回Array/JSON格式

Array：即字符串数组或 JSON数组

Function(request, response)：通过request.term获得输入的值，response([Array])来呈现数据；(JSONP是这种方式)

minLength：当输入框内字符串长度达到minLength时，激活Autocomplete

autoFocus：当Autocomplete选择菜单弹出时，自动选中第一个

delay：即延迟多少毫秒激活Autocomplete