JQuery的Autocomplete 插件如何应用

Posted 2023-04-16

参考技术A

工具/材料

Sublime Text

01

首先打开Sublime Text软件，搭建好页面，然后引入样式库文件，如下图所示

02

接下来在script中添加jquery的脚本库文本，如下图所示，智能提示的相关功能都在jquery-ui.min.js文件中

03

然后在body标签中准备输入框，如下图所示，注意给输入框一个id属性，方便定位

04

界面都搭建好以后，就需要准备数据源了，这里为了演示，我准备了一个字符数组，如下图所示

05

当然在正规的项目中，数据源都是从后台获取的，如下图所示，通常运用ajax从后台获取

06

接下来就是通过autocomplete方法来进行智能提示实例化，如下图所示，注意传入数据源信息

07

最后我们运行程序，你会在界面中看到如下图所示的内容，当你输入一个字母以后，它会给你包含这个字母的内容信息，如下图所示

jquery.autocomplete联想补全插件及使用中遇到的问题

一、jquery.autocomplete.js插件的使用

插件的使用可参考以下这篇文章，里面也有很详细的参数说明：https://www.cnblogs.com/guo0/archive/2012/01/10/2318140.html

二、在使用该插件时遇到的问题：

1、第一次点击输入框不会出现下拉框，要点击两次或者按回退键才行。改成单击时触发的方法为：

将插件源码中的

if ( hasFocus++ > 1 && !select.visible() )

    onChange(0, true);

改为

if ( ++hasFocus > 1 && !select.visible() )

   onChange(0, true);

 

踩坑记录：

（1）minChars设置为0是默认双击触发插件

（2）给输入框添加 onclick="$(this).click();" 事件，结果进入死循环，网页崩了

 

2、