将相同的功能自动完成应用于多个输入框javascript答案

【问题标题】：Apply same function autocomplete to multiple input boxes javascript将相同的功能自动完成应用于多个输入框javascript
【发布时间】：2014-04-30 14:37:56
【问题描述】：

我有一个自动完成 javascript 函数，我不知道如何将其用于同一页面上的多个输入框。我已经尝试了很多东西，但由于某种原因它破坏了这里的脚本是代码以及我现在是如何做的......

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
    $(document).ready(function() {
        SearchText();
    });
  function SearchText() {
        $(".autosuggest").autocomplete({

             select:function(event, ui){
              window.location.href = '/Products/ProductInfoCenter.aspx?partnum=' + ui.item.value;
           },
            source: function (request, response, ui) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/test.aspx/GetAutoCompleteData",
                    data: "{'PartNumber':'" + document.getElementById('txtPartNum').value + "'}",
                    dataType: "json",
                    success: function (data) {
                       response(data.d);
                    },
                    error: function (result) {
                        alert(err.message);
                    }
                });
            }
        });
    }

</script>

还有输入框...

   <input type="text" id="txtPartNum" class="autosuggest" />
   <input type="text" id="txtPartNum" class="autosuggest" />

当然这不起作用..

谢谢你，请帮忙

【问题讨论】：

您的第一个问题是您有两个具有相同id 的元素，这是无效的
我尝试了多种其他方法来修复它，但我不知道任何其他解决方案
那么您的页面到底出了什么问题？
您是否尝试将第二个输入 id 更改为类似 txtPartNum2 的内容？
使用 "{'PartNumber':'" + document.getElementById('txtPartNum').value + "'}", 那么重复的 ID 可能是您的问题

标签： javascript jquery jquery-ui jquery-autocomplete

【解决方案1】：

在我看来，你的代码应该是：

data: {PartNumber: request.term },

当然还有修复无效的 HTML 标记，删除所有重复的 ID。

【讨论】：

使用this.value时输入框的名称是什么
this 指的是我猜的当前输入。
所以我按照你说的做了，结果是bivar.com/test.aspx 它把javascript全部破坏了。
我刚刚检查过，也许可以改用：request.term（对不起，我不知道自动完成插件）
跟随你的链接，你知道你没有在那里加载 jQuery，也没有自动完成插件？！

【解决方案2】：

将您的脚本更改为 -

<script type="text/javascript">
    $(document).ready(function() {
        SearchText();
    });
  function SearchText() {
        $(".autosuggest").autocomplete({

             select:function(event, ui){
              window.location.href = '/Products/ProductInfoCenter.aspx?partnum=' + ui.item.value;
           },
            source: function (term, add) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/test.aspx/GetAutoCompleteData",
                    data: term,
                    dataType: "json",
                    success: function (data) {
                       add(data.d);
                    },
                    error: function (result) {
                        alert(err.message);
                    }
                });
            }
        });
    }
</script>

并且您不能在一页上使用相同的 id。将您的 html 更改为 -

<input type="text" class="autosuggest" />
<input type="text" class="autosuggest" />

【讨论】：