您的位置：首页 > Web前端 > JQuery

使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配

2016-07-18 14:15 1446 查看

要实现如图所示效果，通过ajax,和Autocomplete完成匹配，整了好久，做一下记录。

先分析各个参数的作用：

我们需要在html代码中引入jQuery UI的js文件和css文件，由于jQuery UI是依赖于jQuery的，因此我们还需要在引入jQuery UI之前引入jQuery。

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title>jQuery Autocomplete入门示例</title>



<link href="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" />



<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>



<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>

</head>

<body>

<label for="language">请输入指定的语言：</lable>

<input id="language" name="language" type="text">

</body>

</html>

现在，我们就来编写js代码让language输入框实现自动完成功能。要实现自动完成功能，我们需要如下调用jQuery UI扩展的

autocomplete()

方法：

$("#language").autocomplete(optionsObj);

这里的

optionsObj

是一个用于配置autocomplete相关参数选项的JavaScript对象。我们可以参考Autocomplete官方文档的相关说明来设置该对象。

Autocomplete有一个非常重要的属性参数

source

，它表示用于自动完成功能的数据集合。

source

属性的值可以是一个数组；也可以是一个字符串，用于表示一个远程请求的URL地址，通过处理该URL返回的数据从而获得autocomplete所需的数据；它还可以是一个回调函数，以便于完成一些复杂的数据处理。

现在，我们就使用最简单的方式，给

source

属性指定一个静态的数组，来初步实现自动完成功能。

$("#language").autocomplete({

source: [

"Chinese",

"English",

"Spanish",

"Russian",

"French",

"Japanese",

"Korean",

"German"

]

});

此时，使用浏览器访问该html页面就会发现，我们已经完成的最基本的自动完成功能了

使用autocomplete实现基本的自动完成功能

不过，有些时候我们希望列表显示的文本和实际输入的值并不一致。此时，我们为source指定多个对象的数组，每个对象必须包含label和value属性，label表示显示的文本，value表示实际输入的值(当然它也可以包括其他属性，你可以自行进行相关操作)。

$("#language").autocomplete({
    // 静态的数据源，根据label属性进行显示或模糊匹配，当给输入框设置value属性值
    source: [
        { label: "Chinese", value: 1 },
        { label: "English", value: 2 },
        { label: "Spanish", value: 3 },
        { label: "Russian", value: 4 },
        { label: "French", value: 5 },
        { label: "Japanese", value: 6 },    
    ]
});

// 最上面由多个字符串组成的数组，会被视为label和value值相同、均为该字符串的对象

更多的时候，我们希望该输入框显示的还是label属性值，但还要给另外的元素(例如隐藏文本域)设置value属性值，或者做一些其他处理。我们可以使用select事件来协助处理。

$("#language").autocomplete({
    // 静态的数据源
    source: [
        { label: "Chinese", value: 1, sayHi: "你好" },
        { label: "English", value: 2, sayHi: "Hello" },
        { label: "Spanish", value: 3, sayHi: "Hola" },
        { label: "Russian", value: 4, sayHi: "Привет" },
        { label: "French", value: 5, sayHi: "Bonjour" },
        { label: "Japanese", value: 6, sayHi: "こんにちは" },    
    ],
    select: function(event, ui){
        // 这里的this指向当前输入框的DOM元素
        // event参数是事件对象
        // ui对象只有一个item属性，对应数据源中被选中的对象
        $(this).value = ui.item.label;
        $("#lang_id").val( ui.item.value );
        $("#sayHi").html( ui.item.sayHi );
       
        // 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值
        event.preventDefault();    
    }
});

在实际应用上，我们的数据源并不是一成不变的。大多数情况下，我们的数据都保存在数据库中，此时，我们就需要使用autocomplete通过AJAX请求获取远程数据作为数据源。

$("#language").autocomplete({

source: "public.php"

});

对应的 ajax-actions.php 的服务器页面代码如下：

<?php

header('Content-Type:text/html;charset=UTF-8');

//为了方便举例，这里使用数组来模拟，你也可以在实际应用中从数据库中读取数据

//返回的数据最好是数组或对象类型的JSON格式字符串

$languages = array('Chinese', 'English', 'Spanish', 'Russian', 'French', 'Japanese', 'Korean', 'German');

echo json_encode($languages);

?>

此时，我们再次访问该页面，我们仍然可以看到自动完成的输入效果。

从远程服务器获取数据的自动完成功能

注意：细心的读者可能已经注意到了，不管是从js数组中获取数据，还是从后台服务器获取数据，我们的数据并没有发生变化；但是，我们在从后台获取数据的页面输入"c"时，显示了所有的数据项，而不是如之前一样只显示筛选过滤之后的"Chinese"和"French"。这是因为，当我们从远程请求获取数据时，Autocomplete认为服务器已经进行了过滤处理，返回的数据都是直接可用的，无需再过滤。

在发送AJAX请求时，Autocomplete会把当前输入框中的文字以默认参数名

term

的形式追加到我们设置的URL地址后面。当我们输入一个

时，Autocomplete实际发送的请求路径为

/ajax-actions.php?term=c

。

在上面的实例中，由于我们使用的是php数组来模拟服务器返回的数据，没有根据用户的输入来返回对应的数据，才会导致上述结果。如果在实际应用中，使用类似如下SQL语句来查询数据，则不会存在该问题。

<?php
// 注意：对于用户输入一般需要进行额外的安全处理
$term = $_GET['term'];
$sql = "select column1 as label, column2 as value, ... from table1 where column1 like '$term%'";
$languages = query($sql);
echo json_encode($languages);
?>

此外，有些时候我们需要根据用户的输入或其他操作来构造不同的请求URL，我们可以为

source

指定函数。Autocomplete将用户输入交给该函数，该函数可以进行任何处理，然后把通过任何方式获得的数据交给Autocomplete处理即可。

$("#language").autocomplete({
    // 通过函数来获取并处理数据源
    source: function(request, response){
        // request对象只有一个term属性，对应用户输入的文本
        // response是一个函数，在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表
       
        // 自行处理并获取数据...
        var dataObj = [...]; // 表示处理后的JSON数据
        response(dataObj); // 最后将数据交给autocomplete去展示        
    }
});

在上面的讲解中，我们介绍了autocomplete的必需参数选项

source

。除此之外，还有许多的参数选项可以给我们提供更加强大的其他辅助功能。请参考其参数列表和方法列表。

结合ajax实现过程如下

jsp页面：引入

<script type="text/javascript" src="/fftg/scripts/autocompleteRedisPhData.js"></script>

<script type="text/javascript" src="/fftg/scripts/jquery.autocomplete.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="/fftg/styles/jquery.autocomplete.css" />

添加标签用于绑定：

<td> 药店名称：
<input type="text" name="phName" value="" id="phName" class="rph" >
<input type="hidden" name="rpId" id="rpId" />

</td>

autocompleteRedisPhData代码如下：

window.onload=function(){
$(".rph").autocomplete({
minLength: 0,
source: function( request, response ) {
$.ajax({
url : "/fftg/redisPh/getRedisPharmacy",
type : "post",
dataType : "json",
data : {"phName":$(".rph").val()},

success: function( data ) {
console.log(data);
response( $.map( data, function( item ) {
return {
label: item.label,
value: item.value
}
}));
}
});
},
focus: function( event, ui ) {
$(".rph").val( ui.item.label );
$("#rpId").val( ui.item.value );
return false;
},
select: function( event, ui ) {
$(".rph").val( ui.item.label );
$("#rpId").val( ui.item.value );
return false;
}
});
}
function getKey(label, arr) {
var key = false;
for (var i = 0; i < arr.length; i++) {
var o = arr[i];
if (label == o.label) {
return o.value;
}
}
}

ajax的作用是用于将名称查询转换为id查询。页面提交时由其他部分完成功能，后台接收rpid用于查询。

此处添加其他人对autocomplate的应用：

jQuery 的Autocomplete（自动完成、自动填充）插件有不少，但比较下来我感觉，还是bassistance.de 的比较强大，我们就来写一些代码感受一下。
最简单的Autocomplete（自动完成）代码片段

1 2 3 4 5 6 7 8 9	<script type="text/javascript"> var websites = [ "Google","NetEase","Sohu","Sina", "Sogou","Baidu","Tencent", "Taobao","Tom","Yahoo", "JavaEye","Csdn","Alipay" ]; $().ready(function(){ $("#website").autocomplete(websites); }); </script>
1 2 3 4 5 6	<p> <label>Web Site:</label> <input type="text" id="website" /> <input type="button" id="getvalue" value="Get Value" /> </p> <div id="content"></div>

我们可以看到效果
这么几行代码就完成了自动完成功能，真实太强了，不过bassistance.de的jQuery Autocomplete插件还有更丰富的功能，它的文档在http://docs.jquery.com/Plugins/Autocomplete ，在API
Documentation里，我们要仔细的研究一下autocomplete( url or data, [options] )方法。
autocomplete方法有两个参数，第一个用来填写URL地址或是数据，jQuery Autocomplete插件是支持Ajax方式调用数据，所以可以填写调用的地址，另外可以直接填写数据，格式为JavaScript数组，如我们的例子，autocomplete的另外一个参数
[options]是一个可选项，我们在例子中就没有写，但这个参数里面却有很多可配置的参数，我们还是先修改上面的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$().ready(function(){
      $("#website").autocomplete(websites,{
            minChars:
0,
            max:
5,
            autoFill:
true,
            mustMatch:
true,
            matchContains:
true,
            scrollHeight:
220,
            formatItem:
function(data, i, total){
                  return"<I>"+data[0]+"</I>";
            },
            formatMatch:
function(data, i, total){
                  return data[0];
            },
            formatResult:
function(data){
                  return data[0];
            }
      });
});

在options项我们增加了好几个参数
minChars表示在自动完成激活之前填入的最小字符，这里我们设置为0，在我们双击文本框，不输入字符的时候，就会把数据显示出来，效果如下
max表示列表里的条目数，我们设置了5，所以显示5条，也如上图
autoFill表示自动填充，就是在文本框中自动填充符合条件的项目，看下图，在我们输入“g”的时候，文本框里填充了“google”
mustMatch表示必须匹配条目，也就是在文本框里输入的内容，必须是data参数里的数据，如果不匹配，文本框就被清空
matchContains表示包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示，比如在上面的图中，我们输入了“g”，由于“Sogou”中也包含一个“g”，所以会显示出来，如果将matchContains设为fasle，则“Sogou”就不会显示
scrollHeight不用多解释，看文档就知道。
后面3个参数formatItem、formatMatch、formatResult非常有用，formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体，formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。
[options]里还有很多有用的参数，大家可以看它的文档。
jQuery Autocomplete插件里还有两个重要的方法，一个是result( handler )，一个是search( )，比如用户在选定了某个条目时需要触发一些别的方法时，着两个方法就可以起作用了，我们再修改以上的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$().ready(function(){

      function findValueCallback(event, data, formatted){
            $("#content").html("<strong>"+(!data?"No
match!":"Selected: "+ formatted)+"</strong>");
      }

      $("#website").autocomplete(websites,{
            minChars:
0,
            max:
5,
            autoFill:
true,
            mustMatch:
true,
            matchContains:
true,
            scrollHeight:
220,
            formatItem:
function(data, i, total){
                  return"<I>"+data[0]+"</I>";
            },
            formatMatch:
function(data, i, total){
                  return data[0];
            },
            formatResult:
function(data){
                  return[/b] data[0];
            }
      });
      $("#website").result(findValueCallback);
      $("#getvalue").click(function(){$("#website").search()});
});

看看是什么效果，会在content div的地方显示出我们选择的内容。
jQuery Autocomplete插件所带的例子还是很好的，大家可以仔细研究一下它的例子，更加灵活的运用jQuery Autocomplete插件。

PS:附加一点界面上的模糊搜索功能：

// 模糊搜索
$("#blurQueryCond_value").keyup(function() {
       $("#cacheInstanceList_bodytr").hide();
       var$d = $("#cacheInstanceList_body tr").filter(":contains('" +$.trim($("#blurQueryCond_value").val()) + "')");
       $d.show();
       }
);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery ajax jsp 搜索插件

相关文章推荐

新的分享

章节导航