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.

What is the problem in it. Your test page is working fine.

Dave
– Dave

2014-04-30 18:41:46 +00:00
Commented Apr 30, 2014 at 18:41 — Dave
– Dave, Commented Apr 30, 2014 at 18:41
try the second input box

Dunleyyy333
– Dunleyyy333

2014-04-30 18:47:49 +00:00
Commented Apr 30, 2014 at 18:47 — Dunleyyy333
– Dunleyyy333, Commented Apr 30, 2014 at 18:47

Dave · Accepted Answer · 2014-04-30 19:22:16Z

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

edited Apr 30, 2014 at 19:22

answered Apr 30, 2014 at 19:12

Dave

4,4463 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dunleyyy333 Over a year ago

I tried i need 15 rep... Ill come back when i do though and upvote

brainless coder · Accepted Answer · 2014-04-30 19:08:08Z

0

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.

answered Apr 30, 2014 at 19:08

brainless coder

6,4501 gold badge23 silver badges37 bronze badges

Collectives™ on Stack Overflow

Autocomplete in two input boxes? - javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related