JS实现模糊查询带下拉匹配效果查询地址

时间: 2023-12-24 09:06:09 浏览: 82

JS实现模糊查询带下拉匹配效果

在前端开发中，模糊查询与下拉匹配是提高用户体验的重要功能，特别是在搜索功能上。本文将详细介绍如何使用JavaScript实现这一效果。我们要创建HTML结构，然后应用CSS样式，最后编写JavaScript代码来处理用户输入并展示下拉匹配的结果。 HTML 结构：在提供的代码片段中，可以看到一个简单的搜索框（`<input type="text" id="tt" ...>`）以及相关的按钮和容器元素。`<input>`标签用于接收用户输入，并且通过`autocomplete="off"`禁用浏览器的自动完成功能，以确保我们的自定义模糊查询功能能够正常工作。 CSS 样式： CSS部分定义了搜索框的整体样式，包括边框、圆角、内边距等。`.bigautocomplete-layout` 类用于隐藏的下拉列表，设置了绝对定位、最大高度、滚动条及颜色、背景色等，以便在用户输入时动态显示匹配的建议。 JavaScript 实现： 1. 数据源：你需要一个数据源，通常是一个包含待匹配项的数组。例如，一个包含产品名称或关键词的数组。 2. 输入监听：使用`addEventListener`监听`input`事件，当用户在搜索框中输入时触发。 3. 模糊匹配算法：创建一个函数，根据用户输入的字符进行模糊匹配。常见的模糊匹配方法有前缀匹配、后缀匹配、通配符匹配（如正则表达式）等。这里可以使用字符串的`includes()`方法进行简单的模糊匹配。 4. 更新下拉列表：当用户输入时，调用模糊匹配函数，过滤出匹配的数据，然后更新`.bigautocomplete-layout`中的内容。这可以通过创建一个新的`<ul>`元素，为每个匹配项创建一个`<li>`，然后将其插入到DOM中来实现。 5. 显示/隐藏下拉列表：如果匹配结果为空，隐藏下拉列表；否则，显示它。可以使用`style.display`属性来切换可见性。 6. 高亮匹配部分：为了提供更好的用户体验，可以高亮显示匹配的部分，这可以通过替换字符串中匹配的子串并添加特定CSS类来实现。 7. 选择匹配项：当用户点击下拉列表中的某个选项时，将选中的值填充回搜索框，并隐藏下拉列表。完整的JavaScript代码可能如下所示： ```javascript // 假设这是你的数据源 const dataSource = ['apple', 'banana', 'cherry', 'date', 'elderberry']; document.getElementById('tt').addEventListener('input', function(e) { const inputVal = e.target.value; const matchedItems = dataSource.filter(item => item.includes(inputVal)); // 清空并构建新的下拉列表 const dropdown = document.querySelector('.bigautocomplete-layout'); dropdown.innerHTML = ''; if (matchedItems.length > 0) { matchedItems.forEach(item => { const li = document.createElement('li'); li.textContent = item; li.addEventListener('click', () => { e.target.value = item; dropdown.style.display = 'none'; }); dropdown.appendChild(li); }); dropdown.style.display = 'block'; } else { dropdown.style.display = 'none'; } }); ``` 这个示例仅展示了基础的模糊查询和下拉匹配功能。在实际项目中，可能还需要考虑性能优化（如节流或防抖处理输入事件）、多条件匹配、延迟加载数据、自定义排序规则等高级特性。此外，你还可以使用现成的库，如jQuery UI的Autocomplete或Angular的ng-autocomplete，它们提供了更丰富的功能和配置选项。

要实现带下拉匹配效果的模糊查询地址功能，可以使用 HTML、CSS 和 JavaScript 来实现。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模糊查询地址</title> <style> /* 下拉列表样式 */ .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; /* 设置下拉列表宽度与输入框相同 */ top: 100%; left: 0; right: 0; } /* 下拉列表项样式 */ .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } /* 下拉列表项鼠标悬停样式 */ .autocomplete-items div:hover { background-color: #e9e9e9; } /* 输入框样式 */ input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; } </style> </head> <body> <h2>模糊查询地址</h2>  <div class="autocomplete"> <input type="text" id="myInput" placeholder="请输入地址">  <div id="myDropdown" class="autocomplete-items"></div> </div> <script> // 假设有一个地址列表 let addresses = [ '北京市海淀区中关村南大街5号', '上海市浦东新区世纪大道100号', '广州市天河区珠江新城华夏路1号' ]; // 获取输入框和下拉列表 let input = document.getElementById('myInput'); let dropdown = document.getElementById('myDropdown'); // 监听输入框输入事件 input.addEventListener('input', function () { let value = this.value; dropdown.innerHTML = ''; // 如果输入框有值 if (value) { // 使用正则表达式进行匹配 let pattern = new RegExp(value, 'i'); // i 表示忽略大小写 let filtered = addresses.filter(address => pattern.test(address)); // 如果有匹配结果 if (filtered.length > 0) { // 创建下拉列表项并添加到下拉列表中 filtered.forEach(address => { let option = document.createElement('div'); option.innerHTML = address; option.addEventListener('click', function () { // 点击下拉列表项后将选中的地址显示在输入框中 input.value = address; dropdown.innerHTML = ''; }); dropdown.appendChild(option); }); } } }); </script> </body> </html> ``` 这段代码中使用了 HTML、CSS 和 JavaScript 实现了一个带下拉匹配效果的模糊查询地址功能。用户在输入框中输入关键字后，程序会根据关键字在地址列表中进行匹配并显示匹配结果，用户可以点击下拉列表中的地址将其填入输入框中。

阅读全文

JS实现模糊查询带下拉匹配效果查询地址

相关推荐

纯js实现多选下拉框并模糊查询.html

jquery实现select带模糊搜索下拉选择框

用js写出模糊查询地址并且有下拉菜单

html可编辑模糊查询的下拉文本框如何实现？

jquery实现combobox模糊匹配查询js和jsp代码

带有模糊匹配功能的下拉列表，html，css，js

组件Element-UI 2实现树形下拉选择框懒加载和模糊查询

实现下拉有默认值显示默认值没有默认值显示模糊提示

带有模糊匹配功能的下拉列表，默认值未选择，点击下拉框后下拉框变为输入框，选择后恢复下拉框，html，css，js，jQuery代码实现

带有模糊匹配功能的下拉列表，点击下拉框后下拉框变为输入框，选择后恢复，默认值未选择，html，css，js

a-select模糊搜索下拉选项数据不更新

用js做模糊搜索怎么做

axure中继器下拉列表筛选

uniapp 模糊搜索

el-input模糊搜索功能

react 使用antd 做类似百度搜索框的模糊搜索

thinkphp5，根据第一个输入框的值做动态下拉

jquery，在数组[{"name":"系统","id":"15"},{"name":"子系统","id":"1575"}]中根据name的值模糊匹配

el-select自定义

最新推荐

JSP页面中模糊查询 基于Ajax技术

easyui combogrid实现本地模糊搜索过滤多列

微信小程序下拉框搜索功能的实现方法

JS实现table表格内针对某列内容进行即时搜索筛选功能

Layui带搜索的下拉框的使用以及动态数据绑定方法

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

JSP页面中模糊查询基于Ajax技术

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序