将相同的函数自动完成应用于多个输入框javascript

Apply same function autocomplete to multiple input boxes javascript

本文关键字：应用于 输入 javascript 函数      更新时间：2023-09-26

我有一个自动完成的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" />

当然这是行不通的。。

谢谢您，请帮助

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

data: {PartNumber: request.term },

当然，还可以修复无效的HTML标记，删除任何重复的ID。

将脚本更改为-

<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" />
相关文章：