jQuery插件autoComplete介绍(10级学员张帅鹏总结)

最新推荐文章于 2023-04-08 08:23:38 发布

redarmychen

最新推荐文章于 2023-04-08 08:23:38 发布

阅读量9.6k

点赞数

分类专栏：前端技术课程系列文章标签： autocomplete jquery插件 json javascript java function

前端技术课程系列专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery插件autoComplete介绍

概述：AutoComplete为自动填充，展示之意。用户在使用文本框搜索信息时，使用插件的autoplete方法绑定文本框。当在文本框中输入某个字符时，通过该方法中的指定的数据URL，返回相匹配的数据，自动显示在文本框下，提醒用户进行选择。如百度搜索和google等。

一、创建方法以及属性简介

a) 创建方法

$("文本框元素").autocomplete({source:["java","javaWeb"]});

b) 属性简介

minChars 表示自动完成前填入的最小字符，如果为0，则双击空白文本框时，显示全部的提示数据信息

max 表示显示的提示信息数据的总条数

autoFill 布尔值，表示是否选中自动填充文本框的内容

mustMatch 布尔值，表示是否匹配，设为True时，则文本框中内容必须是匹配数据，如果不是，则清空文本框

matchContains 布尔值，表示是否包含匹配数据，设置为true时，则文本框中内容只要被匹配数据包含则显示提示数据，否则不显示。

scrollHeight 设置匹配数据滚动显示的高度

二、本地数据举例

<body>

              <div>

                     <h1>

                            autoComplete

                     </h1>

                     <div class="ui-widget">

                            <input type="text" id="autocomplete" size="40px" />

                     </div>

              </div>

       </body>

//定义本地数据，此数据应该为js的数组对象，包含多个值来指定给文本框来源

Var data=["java","javaWeb","javaScript"];

$("#autocomplete").autocomplete( {

              source : data;

       });

三、请求后台数据来完成操作

a) 普通数组的数据

//直接把source指定上请求数据的url即可，它会默认的传入参数为term 值为文本框当前的值

$("#autocomplete").autocomplete( {

              source : "./csdn/admins.action"

       })

b) Json数据的处理

//我们可以将json中其他的属性取出来显示当列表框中，还可以为它设定指定的格式显示。这样的情况json数据必须为标准化的，对象中也必须有value这个属性，它模式只识别value这个一个属性作为值，也就是说你选中的时候。Value的值会放到文本框中

$("#autocomplete").autocomplete( {

              source : "./csdn/admins.action"

       }).data("autocomplete")._renderItem = function(ul, item) {

                     

              return $("<li></li>").data("item.autocomplete", item).append(

                            "<a>"+ item.id +"---约 100个"+ item.userName+"</a>")

                            .appendTo(ul);

       };

c) 利用自定义异步请求来完成操作

redarmychen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jQuery插件autoComplete介绍(10级学员张帅鹏总结)

jQuery插件autoComplete介绍概述：AutoComplete为自动填充，展示之意。用户在使用文本框搜索信息时，使用插件的autoplete方法绑定文本框。当在文本框中输入某个字符时，通过该方法中的指定的数据URL，返回相匹配的数据，自动显示在文本框下，提醒用户进行选择。如百度搜索和google等。一、创建方法以及属性简介a) 创建方法$("文本
复制链接

扫一扫