javascript - 在两个输入框中自动完成？ - JavaScript

Question

嗨，我正在尝试了解如何将我的 javascript 代码用于两个输入框。它抓取的数据和 URL 使用 C# 代码，但这应该不重要。请帮助我自动完成..

这是它的实际测试页面

http://www.bivar.com/test.aspx

这是我用于 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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
<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) {
                $.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="txtPartNum2" class="autosuggest" />

谢谢您，请帮忙。

Answer 1

这是您更新的函数。经过测试，其工作完美。问题是，它每次都传递第一个输入框的值。我使用 $(this.element) 来获取请求自动完成的当前元素。在处理类时，我们必须使用 (this) 关键字来避免冲突。

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