Autocomplete in two input boxes? - javascript

Question

Hi i am trying to find out how to use my javascript code for two input boxes. the data its grabing and the URL is using C# code but that should not matter. Please help me with my autocomplete..

Here is a test page of it in action

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

Here is the code i am using for the 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>

Here are the two input boxes

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

Thank you and please help.

Answer 1

Here is your function updated. Tested and its working perfectly. Problem was that, it was passing value of first input box every time. I used $(this.element) to get current element on which autocomplete is requested. When dealing with classes we have to make use of (this) keyword to avoid conflicts.

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);
            }
        });
    }
  });
}

Answer 2

The only problem I see is that both the inputs are sending same data as parameter. But that is what it supposed to do isn't it? Because you are using this -

data: "{'PartNumber':'" + document.getElementById('txtPartNum').value + "'}",

in your code. I think this is the error. But please make sure you ask properly what you are looking for. Your question is not completely understandable. A usual code should look like this -

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

Let me know if this what you were looking for.