JQuery的Autocomplete 插件如何应用

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

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

赞 (0)

相关推荐

  • substitute插件干嘛的

    substitute插件干嘛的

    概述很多人觉得sublime不好用是因为没有快捷键,但没有快捷方式的原因其实是没有安装插件.下面介绍一下怎么安装插件及一些好用的插件.1.package contral安装插件Package cont ...

  • 解决croppic插件切图后图片不更新的问题

    操作方法 01 croppic是程序员之间比较流行的 jQuery 图片裁剪插件,但是我们在使用的过程就会发现,当我们上传一幅图片点击切图后往往发现图片并没有自动更新.那么怎样解决这个问题呢,下面就给 ...

  • 最简单的图片轮播代码

    一般运用JAVA编写轮播代码相比较其他软件更为简单,那就让小编来给大家介绍一下如何用 JAVA编写轮播代码. 操作方法 01 首先下载一个jquery库的插件．下载的插件要放在目录下．然后在html文 ...

  • 30款超实用的JQUERY插件大合集

    互联网是一个神奇的东西，你在这里碰到臭味相投的朋友，发现世界各个角落的趣闻。最有意思的是，总有人能想到一些新奇古怪好玩有趣的点子，分享给整个世界，让我们的工作更轻松，让我们的生活更有意思。实际上jQu ...

  • 超过1000个超实用的高品质JQUERY插件免费使用

    如果你是网页设计师,又要写点DIV+CSS+JS前端代码,可能会经常找一些插件来帮你实现自己写不出来或者复杂的JS特效,今天发现的这个jQuery 插件网站「jQuery Cards」,有超过1000 ...

  • 实现在线浏览PDF文件的实用jQuery插件有哪些?

    在web开发当中我们经常需要进行需要在线浏览PDf内容,在线嵌入动态pdf,传统的解决方法安装客户端PDF阅读器,如果是在谷歌是可以在线浏览的,因为他自身就带了一些插件,以前遇到这样的问题往往是费时又 ...

  • Sublime快捷键与常用插件配置总结

    Sublime快捷键与常用插件配置总结

  • AutoComplete:iexplore.exe 应用程序错误

    今天一个朋友说他的IE8浏览器总是出现一个AutoComplete:iexplore.exe应用程序错误，于是浏览器就崩溃了！我觉得应该和以前解决的SysFader:IEXPLORE.EXE应用程序错 ...

  • 29个常用 Sublime Text 插件推荐

    29个常用 Sublime Text 插件推荐