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

时间:2014-04-30 18:21:29

标签: javascript jquery jquery-ui jquery-autocomplete

您好我正在尝试找出如何将我的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" />

谢谢你,请帮忙。

2 个答案:

答案 0 :(得分: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);
            }
        });
    }
  });
}

答案 1 :(得分:0)

我看到的唯一问题是两个输入都发送与参数相同的数据。但它应该做的不是它吗?因为你正在使用它 -

data: "{'PartNumber':'" + document.getElementById('txtPartNum').value + "'}",
你的代码中的

。我认为这是错误。但请确保您正确询问您要找的是什么。你的问题不完全可以理解。通常的代码应如下所示 -

data: "{'PartNumber':'" + request.term + "'}",

如果您正在寻找,请告诉我。

相关问题