Question

I received help on the first part of my problem here whoever I forgot to mention my second issue. After a user selects a value from the autocomplete field I would like to populate the vaules ID into a hidden field so it can be passed to PHP and inserted into a database.

Here is a breakdown of what I am trying to accomplish:

User selects venue from autocomplete field.
After the venue has been selected, the venues phone, address and website are display under the autocomplete field. The ID of the record in the database is passed to a hidden field as its value.

I have search but found nothing. Can someone lead me in the right direction?

Thanks

Answer 1

I m assuming you re using the standard autocomplete plugin: http://docs.jquery.com/Plugins/Autocomplete

If you have this in your html:

<input type= text  id= foo  />
<input type= hidden  id= bar  />

You will want to use this as your javascript:

$(document).ready(
function(){
    var data = "1,address 1,phone 1|2,address 2,phone 2".split( | );
    $("#foo").autocomplete(data,{formatItem:function(item){
        return item[0].split( , ).slice(1).join(   );}
    }).result(function(event,item){
        $("#bar").val(item[0].split( , )[0]);
    });
});

What you re doing is this:

Adding a formatItem option to take out the id from your source data.
Adding a result handler to set your hidden field with the id.

Let me know if this helps.

Answer 2

Having hit this brick wall as well I think, with some help here, I have found an even simpler solution

  $("#fieldA").autocomplete({
    source:  <%=Url.Action("functionName", "ControllerName") %> ,
    select: function(e,ui) { $( #fieldB ).val(ui.item.objectName) }, 
  });

fieldA does the autocomplete from the source file. I m using ASP.net MVC which takes the functionName inside of the ControllerName (of course you could just stick the URL of the web link you want as well). The web page returns a list of rows broken down into separate item fields. The only restriction is that at one of the fields returned is named "value". The select then allows you to take apart all the other fields (the objectname on the end of ui.item) from the ui.item object and place in as many fields as you require while the "value" from the ui.item.value automatically fills in the autocomplete field.

友情链接