使用 jQuery 的 Autocomplete 插件实现input输入提示功能 input 输入模糊提示demo

如何使用 HTML5 实现文本框输入内容后带有模糊匹配的功能。这其实很简单，而且jQuery也为我们提供了相应的插件 Autocomplete.js。这不是一项新技术，百度一搜有很多相关的文章。在这里我就再分享一下如何实现这个功能。
Autocomplete.js 插件地址：http://jqueryui.com/autocomplete/

input 输入模糊提示demo

全部代码如下所示。

<!DOCTYPE HTML>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title> input 模糊匹配功能</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><link rel="stylesheet" href="http://jqueryui.com/autocomplete/resources/demos/style.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>$( function() {var availableTags = [     "Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];$( "#tags" ).autocomplete({source: availableTags});} );</script>
</head>
<body>
<div class="ui-widget"><label for="tags">输入内容: </label><input id="tags">
</div>
</body>
</html>

在实际使用中，模糊匹配的词都是从后台查询的。我们这里只需要将source的数据源改为ajax后台查询的结果即可。如下：

<script>$( function() {$( "#tags" ).autocomplete({source: ajaxTags()});} );function ajaxTags(){return $.ajax({url: "url",async: false,data:{tags:$('#tags').val()},dataType:'json'}).responseText;}</script>

使用 jQuery 的 Autocomplete 插件实现input输入提示功能 input 输入模糊提示demo相关推荐

jQuery的Autocomplete插件
Autocomplete插件根据用户输入值进行搜索和过滤让用户快速找到并从预设值列表中选择通过给Autocomplete字段焦点,或者在其中输入字符,插件开始搜索匹配的条目并且,显示供选择的值 ...
jQuery的Autocomplete插件的远程url取json数据的问题
关于远程返回的json数据的展示,以前一样的代码,如果是本地写好的json串数据,插件显示就没有问题,一旦换成ulr方式读取一样的数据,插件就不能正常显示问题了. 今天偶然搜索资料找到一篇csdn上有 ...
用trie树实现输入提示功能，输入php函数名，提示php函数
参照刘汝佳的trie树结构体 #include "stdio.h"#include"stdlib.h"#include"string.h" ...
jqueryui时间插件_jQueryUI AutoComplete插件
jqueryui时间插件 In this post, we will discuss about one of the useful plugins provided by jQuery to spe ...
JQuery UI AutoComplete 与 Strtus2 结合使用
这篇文章中完成一个搜索城市的示例程序,输入城市名称或者拼音首字母,返回城市的智能提示.使用了JQuery UI AutoComplete插件. 首先,看一下效果图,了解程序完成后是一个什么样子. 汉字 ...
一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址: http://keleyi.com/a/bjad/e ...
45个jQuery的导航插件和教程
正如我们所知道的,一个新用户访问一个网站时,决定他们去留的关键是最初的15-20秒种.这是至关重要的,你必须遵循统一的风格来设计您的网站,特别是导航的风格,可能性规则,让用户可以轻松地找到他们想要的内 ...
jquery 图片裁剪 java_[Java教程]5 款最新的 jQuery 图片裁剪插件
[Java教程]5 款最新的 jQuery 图片裁剪插件 0 2015-05-18 16:00:20 这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁 ...
php 智能输入提示插件,PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能_php实例...
我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息.本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现 ...

使用 jQuery 的 Autocomplete 插件实现input输入提示功能 input 输入模糊提示demo

使用 jQuery 的 Autocomplete 插件实现input输入提示功能 input 输入模糊提示demo相关推荐

最新文章

热门文章