当前位置首页 > 爱问问> 正文

JQuery的Autocomplete 插件如何应用

2021-09-16 04:44:16 爱问问

我们用搜索引擎搜索信息的时候,当在搜索框里输入一个字,搜索引擎就会给我们智能的提示相近的信息。那么这种技术是如何实现的呢?其实运用Jquery的Autocomplete插件就可以实现。下面小编给大家分享如何使用这个插件。

工具/材料

SublimeText

操作方法

【步骤01】

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

【步骤02】

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

【步骤03】

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

【步骤04】

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

【步骤05】

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

【步骤06】

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

【步骤07】

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

声明:此文信息来源于网络,登载此文只为提供信息参考,并不用于任何商业目的。如有侵权,请及时联系我们:baisebaisebaise@yeah.net