Is there a way to add name/value functionality to jquery autocomplete for .net?

Question

I've recently added the JQuery autocomplete plug in and have a textbox that autocompletes a list of employees. It works great and I commend the authors of the plugin.

I think the textbox would be MUCH more useful though, when upon selecting, we can extract the StaffID (Ie. retreive the value of the selection). My code is below and you can see that I am simply adding the staff names, would be nice to associate IDs.

Does anyone know of any way to do this?

My JQuery:

    $(document).ready(function() {
        $("#txtStaff").autocomplete('autocompletetagdata.aspx');
    });

My ASPX page:

protected void Page_Load(object sender, EventArgs e)
{
    StaffViewListClass staffList = StaffViewListClass.GetStaff();

    StringBuilder sb = new StringBuilder();

    foreach (StaffViewClass staff in staffList)
    {
        sb.Append(staff.FullName).Append("\n");
    }

    Response.Write(sb.ToString());

}

Answer 1

Which autocomplete plugin are you using?

I use the one written by Tomas Kirda and it has the functionality you need. I use it like this:

$('#CustomersUID').autocomplete({
      width: 300,
      delimiter: /(,|;)\s*/,
      onSelect: function(value, data) {$('#CustomersUID_value').val(data);}
    })

onSelect passes both the text value and a data value to be used.

Answer 2

Hi Spencer,

I am also facing the same problem in retriving the ID of the selected value.

my program cdoe

$(document).ready(function(){

        $("#code").autocomplete("getdata.jsp",{
    width: 100,
    maxHeight:100,
                             delimiter: /(,|;)\s*/

  });  
    })  
</script>

<h3>Code</h3>  
<input type="text" id="code" name="codes"/>

jsp page

import="autocomplete.TestDB";

TestDB db = new TestDB();

String query = request.getParameter("q");

List codelist= db.getData(query);

Iterator iterator = codelist.iterator();
while(iterator.hasNext()) {
            String codeid= (String)iterator.next();
 String code= (String)iterator.next();
 out.println(code);
}

Here in the java code i am fetching codeid an code.how can i send codeid to main page.

could you explain with a sample program how to achive the selected value ID.it would great help to me.

Thanks

Answer 3

Is there a way to override the default select and set the data instead the suggestion? Suggested code works if we put the value in a differente field CustomersUID_value not CustomersUID. How can I put on CustomersUID? (currently it does not works and it is always overwritten by suggestion)