JQuery搜索框模糊匹配实现：无需JQuery UI autocomplete插件
100 浏览量
更新于2024-09-01
收藏 71KB PDF 举报
本文将介绍如何使用JQuery实现搜索框自动补全功能，特别是模糊匹配。在这个示例中，我们不依赖JQuery UI的autocomplete插件，而是自定义了相关业务代码来达到相同的效果。
在JavaScript和前端开发中，搜索框的自动补全功能能够极大地提升用户体验，它允许用户在输入时快速找到可能的匹配项。JQuery是一个广泛使用的JavaScript库，提供了丰富的API用于简化DOM操作和事件处理，非常适合用来实现这个功能。
首先，我们需要引入JQuery和JQuery UI的CSS及JS文件。在示例代码中，这些文件是从jQuery的CDN（内容分发网络）上加载的，确保了页面加载速度：
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/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>
</head>
```
接下来，我们需要创建一个JavaScript函数来处理自动补全逻辑。在JQuery中，我们可以监听`keyup`事件，当用户在搜索框中输入时触发。在示例中，`availableTags`数组存储了预设的可选项，实际应用中应根据用户输入动态获取数据：
```javascript
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
// ...
];
function autocompleteSearch() {
var userInput = $(this).val();
// 根据userInput进行模糊匹配，筛选可用的tags
var filteredTags = availableTags.filter(tag => tag.includes(userInput));
// 显示匹配结果
$(this).autocomplete({
source: filteredTags
});
}
$("#searchBox").on("keyup", autocompleteSearch);
});
```
在上面的代码中，`autocompleteSearch`函数负责获取当前输入值并进行模糊匹配。`includes()`方法是JavaScript中的字符串方法，用于检查一个字符串是否包含指定的子字符串。然后，我们使用`autocomplete`方法设置源为匹配后的`filteredTags`数组，这将自动显示匹配的建议列表。
要注意的是，这里的实现仅作为基础示例，实际应用中可能需要考虑更多因素，如异步数据加载、请求API获取实时数据、处理大量数据的性能优化、错误处理等。此外，你可能还需要自定义样式以符合网站设计风格。
总结起来，通过JQuery和简单的JavaScript逻辑，我们可以实现搜索框的自动补全功能，而无需依赖特定的库或插件。这个功能的实现关键在于监听用户输入，进行模糊匹配，并实时更新显示的建议列表。在实际项目中，可以根据需求进行扩展和调整，以满足更复杂的需求。
JQuery搜索框自动补全搜索框自动补全(模糊匹配模糊匹配)功能实现示例功能实现示例
主要介绍了JQuery搜索框自动补全(模糊匹配)功能实现示例没使用JQuery UI的autocomplete插件，具有一定的
参考价值，感兴趣的小伙伴们可以参考一下
本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,
同时可以给大家一个参考
首先贴出的是JQuery Ui 的自动补全插件部分的代码,后面的功能都是在其基础上追加的,直接拷贝到你的本地就可以直观的看
到运行效果,也可以到官网上面体验和查看,为了方便,我这里是直接引入的JS链接点击下载JQuery UI的源码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="external nofollow" rel="external nofollow" >
<link rel="stylesheet" href="/resources/demos/style.css" rel="external nofollow" >
<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 = [//这里要改成根据用户的输入,自动更换词库的形式
"ActionScript",
"AppleScript",
"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">Tags: </label>
<input id="tags">
</div>
</body>
</html>
运行截图
jquery-ui的自动补全功能截图
下面说下我追加的部分功能及实现思路,有可以改进的地方还请指教:
1、首先,数据源要根据用户输入的内容实时更新.
输入框的值随着用户的输入会一直变动.所以,输入框下方的推荐补全的内容要输入的值进行变动,这里使用onkeyup属性来监听
键盘动作,并传递此时input的value值到js函数中.
//html
<input type="search" class="" id="tags" placeholder="搜索" required="" onkeyup="catch_keyword(this.value)">
下载后可阅读完整内容，剩余3页未读，立即下载
1002 浏览量
498 浏览量
2011-06-22 上传
191 浏览量
101 浏览量
2020-10-23 上传
272 浏览量
weixin_38637144
- 粉丝: 4
- 资源: 925
我的内容管理
展开
