作者：丁木China | 来源：互联网 | 2023-07-24 16:04
如何使用HTML5实现文本框输入内容后带有模糊匹配的功能。这其实很简单，而且jQuery也为我们提供了相应的插件Autocomplete.js。这不是一项新技术&#x
如何使用 HTML5 实现 文本框输入内容后带有模糊匹配的功能。这其实很简单&＃xff0c;而且jQuery也为我们提供了相应的插件 Autocomplete.js。这不是一项新技术&＃xff0c;百度一搜有很多相关的文章。在这里我就再分享一下如何实现这个功能。
Autocomplete.js 插件地址&＃xff1a;http://jqueryui.com/autocomplete/
input 输入模糊提示demo
全部代码如下所示。
<html lang&＃61;"en">
<head><meta charset&＃61;"utf-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1"><title> input 模糊匹配功能title><link rel&＃61;"stylesheet" href&＃61;"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><link rel&＃61;"stylesheet" href&＃61;"http://jqueryui.com/autocomplete/resources/demos/style.css"><script src&＃61;"https://code.jquery.com/jquery-1.12.4.js">script><script src&＃61;"https://code.jquery.com/ui/1.12.1/jquery-ui.js">script><script>$( function() {var availableTags &＃61; [ "Asp","BASIC","C","C&＃43;&＃43;","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&＃61;"ui-widget"><label for&＃61;"tags">输入内容: label><input id&＃61;"tags">
div>
body>
html>
在实际使用中&＃xff0c;模糊匹配的词都是从后台查询的。我们这里只需要将source的数据源改为ajax后台查询的结果即可。如下&＃xff1a;
<script>$( function() {$( "#tags" ).autocomplete({source: ajaxTags()});} );function ajaxTags(){return $.ajax({url: "url",async: false,data:{tags:$(&＃39;#tags&＃39;).val()},dataType:&＃39;json&＃39;}).responseText;}script>
京公网安备 11010802041100号