实现输入内容提示的功能（仿google_百度输入框提示）jquery.ui.autocomplete.js插件

最新推荐文章于 2024-06-10 09:58:26 发布

FreeeLinux

最新推荐文章于 2024-06-10 09:58:26 发布

阅读量1.9k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实验：

对input控件实现输入内容提示功能（仿google_百度输入框提示功能）

目的：

优化网页交互性，学习jQuery的部分操作。

知识背景：

利用jquery中的jquery.ui.autocomplete.js插件。

如以下jquery.ui中的基本测试代码：

[html]view plaincopy 
   
 <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.2/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.2/jquery-ui.js"></script>     
 <script>  
     $(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"];  
         <SPAN style="COLOR: #ff0000"><STRONG>$("#tags").autocomplete({ source: availableTags });  
 </STRONG></SPAN>    });   
       </script>  
 </head>  
 <body>   
     <div class="ui-widget">    
         <label for="tags">Tags: </label>    
             <input id="tags" />  
     </div>   
 </body>  
 </html>  

[html]view plaincopy 
   
 <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.2/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.2/jquery-ui.js"></script>     
 <script>  
     $(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"];  
         <span style="color:#ff0000;"><strong>$("#tags").autocomplete({ source: availableTags });  
 </strong></span>    });   
       </script>  
 </head>  
 <body>   
     <div class="ui-widget">    
         <label for="tags">Tags: </label>    
             <input id="tags" />  
     </div>   
 </body>  
 </html>  

如图：

作为一个基础用户，暂不考虑jqury的各种功能能够以及语法结构，相信有点编程基础的都知道，在

[html]view plaincopy 
   
 <SPAN style="COLOR: #ff0000"> $("#tags").autocomplete({ source: availableTags });</SPAN>  

[html]view plaincopy 
   
 <span style="color:#ff0000;"> $("#tags").autocomplete({ source: availableTags });</span>  

这段代码中，对<input>中id为tags的控件进行了一个自动补全的绑定，补全绑定数据来源于自定义的数组availableTags。

我们需要思考的就是如何把这个提供的补全数据和我数据库中的数据进行绑定。

因此，需要了解一下.autocomplete()这个函数具体的一些参数设置。

具体可以访问网站查看：http://api.jqueryui.com/1.9/autocomplete/

这里我只把与实验有关的进行说明一下：

minLengthType: Integer Default:`1`

如：

[html]view plaincopy 
   
 $( ".selector" ).autocomplete({ minLength: 1 });  

[html]view plaincopy 
   
 $( ".selector" ).autocomplete({ minLength: 1 });  

实现的是在输入多少个字符后弹出提示框选项，一般我觉得定位1比较好，输入1个字符后开始提示，1也是默认值，当然如果想还没有输入就进行提示，可以设置为0。
官方解释如下：

The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.

sourceType: Array orString orFunction( Object request, Function response(Object data ) )Default:`none; must be specified`

`指定数据源，可以使数组，字符串，或者一个函数（主要与数据库交互后返回的值）`

`如果数据源是数组（Array）的话，可以有两种指定方式，如：`

An array of strings: [ "Choice1", "Choice2" ]
An array of objects with label and value properties:[ { label: "Choice1", value: "value1" }, ... ]
   其中label为显示在提示框中的值，value为选择后插入到input控件中的值。

如果数据源为字符串（String）的话，必须制定一个可以返回JSON数据的URL地址

    就是说这里的String必须是一个JSON结构的字符串。（JSON数据简单说就是可以理解为["str1","str2"]或[ { label: "Choice1", value: "value1" }, ... ]这样的数据值。因为这里需要的是数据源，只要指定好数据源格式标准即可，你要是有创意，也可以自己定义，总之最后把需要的字符串返回即可。

    假如提取数据的页面为http://example.com,那么传入该页面时也会传入一个作为模糊查询的参数如：temp

    因此url可以构造为http://example.com?temp=[inputstr]这里inputstr就是输入在input控件目前的值。

如果数据源为一个交互函数function(request,response),就可以自定义请求，响应需要做的工作，如调用一个后台文件，数据库等。如：
[html] view plain copy
1. $("#key").autocomplete({
2. minLength: 1, source: function (request, response) {
3. $.ajax({
4. type: "POST",
5. url: "ServerData.ashx?keyword=" + request.term,
6. contentType: "application/json; charset=utf-8",
7. dataType: "json",
8. <SPAN style="COLOR: #ff0000">success</SPAN>: function (data) {
9. response($.map(data, function (item) {
10. return { value: item};
11. }));
12. },
13. <SPAN style="COLOR: #ff0000">error</SPAN>: function () {
14. alert("ajax请求失败");
15. }
16. });
17. }
18. })
[html] view plain copy
1. $("#key").autocomplete({
2. minLength: 1, source: function (request, response) {
3. $.ajax({
4. type: "POST",
5. url: "ServerData.ashx?keyword=" + request.term,
6. contentType: "application/json; charset=utf-8",
7. dataType: "json",
8. <span style="color:#ff0000;">success</span>: function (data) {
9. response($.map(data, function (item) {
10. return { value: item};
11. }));
12. },
13. <span style="color:#ff0000;">error</span>: function () {
14. alert("ajax请求失败");
15. }
16. });
17. }
18. })
调用$.ajax并设置其中的type,url,contentType等参数

如url：同String作为数据源方式类似，但是为了测试，用这种方法的一个好处是可以设置操作成功后的功能

success：成功后执行的功能，返回提取的数据值即可；

error:弹出对话框，请求失败（如数据库连接失败，数据查询命令错误等）

实验效果截图：

调用url功能ServerData.ashx主要代码：
[csharp] view plain copy
1. //作为主函数使用
2. public void ProcessRequest(HttpContext context)
3. {
4. context.Response.ContentType = "text/plain";
5. string keyword = context.Request.QueryString["keyword"];
6. if (keyword != null)
7. {
8. JavaScriptSerializer serializer = new JavaScriptSerializer(); // 通过JavaScriptSerializer对象的Serialize序列化为["value1","value2",...]的字符串
9. string jsonString = serializer.Serialize(GetFilteredList(keyword));
10. context.Response.Write(jsonString); // 返回客户端json格式数据
11. }
12. }
[csharp] view plain copy
1. //作为主函数使用
2. public void ProcessRequest(HttpContext context)
3. {
4. context.Response.ContentType = "text/plain";
5. string keyword = context.Request.QueryString["keyword"];
6. if (keyword != null)
7. {
8. JavaScriptSerializer serializer = new JavaScriptSerializer(); // 通过JavaScriptSerializer对象的Serialize序列化为["value1","value2",...]的字符串
9. string jsonString = serializer.Serialize(GetFilteredList(keyword));
10. context.Response.Write(jsonString); // 返回客户端json格式数据
11. }
12. }
       如果用于测试：可试着在该函数上直接返回一个字符串如： context.Response.Write("Hello World"); 然后再前台试试输入"he"看看效果。

       该函数主要功能是提取"keword"的值，即用户输入的字符串，用于模糊查询关键字，对返回的结果进行JSON格式化处理，最后返回。

        关于如何利用C#进行数据库查询在此省略，可以下载项目综合包看看（地址见末尾）。

项目包简介：vs2010,sql server 2008,需要用的js,css均在压缩包中。

index.html,atest.aspx均可作为测试页面，需要连接数据库；

test.aspx为不与数据库进行交互，采用的是Array作为数据源的方式，可单独运行；

数据库可在web.config中进行更改，查询语句可以再ServerData.ashx中进行修改，代码中也有注释，可参考。

   Good Luck ！希望对你也有点帮助。
参考：
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8">
</head>
<body>

<div class="ui-widget">
<label for="tags">标签：</label>
<input id="tags">
</div>

</body>
<script type="text/javascript" src="jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</html>
$(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"
];
function split(val) {
return val.split(/;\s*/);
}
function extractLast(term) {
return split(term).pop();
}

$("#tags")
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("ui-autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function() {
return false;
},
select: function(event, ui) {
var terms = split(this.value);
terms.pop();
terms.push( ui.item.value );
terms.push("");
this.value = terms.join(";");
return false;
}
});
});

FreeeLinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
实现输入内容提示的功能（仿google_百度输入框提示）jquery.ui.autocomplete.js插件

实验：对input控件实现输入内容提示功能（仿google_百度输入框提示功能）目的：优化网页交互性，学习jQuery的部分操作。知识背景：利用jquery中的jquery.ui.autocomplete.js插件。如以下jquery.ui中的基本测试代码：[html] view plaincopy
复制链接

扫一扫