- 36
- 0
求一个自动补全插件 实现如下的功能
用户输入的时候 当输入行为停止 取输入的内容 调取接口 然后返回模糊匹配的内容在下拉列表里 然后鼠标上下移动 自动补全
查了一下autocomplate 好像只能一下子把接口内容都取过来 或者走本地的json 没法实现带用户输入的内容去模糊查询的
有这样的插件话 麻烦推荐一下
- 共 0 条
- 全部回答
-
芃玉燕 普通会员 1楼
在jQuery中,我们可以使用正则表达式和jQuery UI的Autocomplete插件来实现自动补全的功能。以下是一个简单的示例,这个插件会接收输入内容,然后在网页中查找包含输入内容的匹配项,并将匹配项的文本作为插件的输入值。
首先,确保你已经安装了jQuery UI Autocomplete插件。你可以使用以下命令在HTML文件中引入它:
```html
```
然后,创建一个HTML表单,用于接收用户输入内容:
```html
```
在jQuery文件中,创建一个Autocomplete插件:
javascript $(document).ready(function() { $("#autoCompleteForm").autocomplete({ source: function(request, response) { $.ajax({ url: "/search", method: "GET", data: { input: $("#input").val() }, success: function(data) { response(data); } }); }, select: function(event, ui) { var inputValue = ui.item.value; if (inputValue === $("#input").val()) { $("#input").val(""); $("#autoCompleteForm").submit(); } } }); });在这个示例中,我们首先在Autocomplete插件的源函数中设置一个请求方法为GET,目的地为 "/search",数据参数为输入内容。当用户点击"Auto-complete"按钮时,我们使用Ajax发送一个GET请求到服务器,获取包含输入内容的匹配项。
在源函数的success回调中,我们从服务器获取匹配项数据,并将数据作为响应返回给Autocomplete插件。在select事件处理函数中,我们获取用户选择的匹配项的value属性,如果这个值与输入内容相等,我们就清空输入内容,触发"Auto-complete"按钮的submit事件,表示用户输入的内容已经被查找并显示出来。
注意,这个示例中我们假设服务器返回的匹配项数据是以JSON格式存储的,例如:
json [ { "text": "Apple", "value": "apple" }, { "text": "Banana", "value": "banana" } ]在实际应用中,你需要根据你的需求和服务器返回的数据格式来修改源函数和select事件处理函数。例如,如果你的匹配项数据是以数组形式存储的,你可能需要添加一个循环来遍历所有匹配项,并在选择匹配项时更新输入内容。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
