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插件干嘛的

    概述很多人觉得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 插件推荐