CODEWITHSUNDEEP
jqueryautocompletehiddenhidden-field
mrdthomas
mrdthomas

Reputation: 45

JQuery Autocomplete hidden field

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:

  1. User selects venue from autocomplete field.
  2. 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

Upvotes: 2

Views: 7208

Answers (2)

Harry B
Harry B

Reputation: 21

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.

Upvotes: 2

Jieren
Jieren

Reputation: 1952

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:

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

Let me know if this helps.

Upvotes: 6

Related Questions