账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    求一个JQ自动补全的插件(带输入内容取查询接口)
    36
    0

    求一个自动补全插件 实现如下的功能

    用户输入的时候 当输入行为停止 取输入的内容 调取接口 然后返回模糊匹配的内容在下拉列表里 然后鼠标上下移动 自动补全

    查了一下autocomplate 好像只能一下子把接口内容都取过来 或者走本地的json 没法实现带用户输入的内容去模糊查询的

    有这样的插件话 麻烦推荐一下

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 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事件处理函数。例如,如果你的匹配项数据是以数组形式存储的,你可能需要添加一个循环来遍历所有匹配项,并在选择匹配项时更新输入内容。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部