JQuery UI autocomplete with element and id

Question

I have the following script that works with a 1 dimensional array. Is it possible to get this to work with a 2 dimensional array? Then, no matter which element is selected, clicking on the second button on the page should display the identifier of the selected item.

This is a 1-dimensional array script:

var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]; $("#txtAllowSearch").autocomplete({ source: $local_source }); 

This is the button script for the button to check for an incomplete identifier:

 $('#button').click(function() { // alert($("#txtAllowSearch").someone_get_id_of_selected_item); }); 

Answer 1

You need to use the ui.item.label (text) and ui.item.value (id) properties

 $('#selector').autocomplete({ source: url, select: function (event, ui) { $("#txtAllowSearch").val(ui.item.label); // display the selected text $("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input } }); $('#button').click(function() { alert($("#txtAllowSearchID").val()); // get the id from the hidden input }); 

[Edit] You also asked how to create a multidimensional array ...

You should create an array as follows:

 var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"], [4,"javascript"], [5,"asp"], [6,"ruby"]]; 

Read more about how to work with multidimensional arrays here: http://www.javascriptkit.com/javatutors/literal-notation2.shtml

Answer 2

On the browse tab of the jQuery autocomplete plugin:

Local data can be simple arrays of strings or contains objects for each element of the array, either label or value, or both. The label property is displayed in the offer. The value will be inserted into the input element after the user has selected something from the menu. If only one property is specified, it will be used for both, for example. if you provide only value-properties, the value will also be as a label.

So, your “two-dimensional” array might look like this:

 var $local_source = [{ value: 1, label: "c++" }, { value: 2, label: "java" }, { value: 3, label: "php" }, { value: 4, label: "coldfusion" }, { value: 5, label: "javascript" }, { value: 6, label: "asp" }, { value: 7, label: "ruby" }]; 

You can access the label and value properties inside focus and select through the ui argument using ui.item.label and ui.item.value .

Edit

It looks like you need to “cancel” the focus and select events so that it does not place ID numbers inside text fields. In doing so, you can copy the value to a hidden variable. Here is an example .

Answer 3

My code only worked when I added 'return false' to the select function. Without this, the input was set with the correct value inside the selection function, and then after setting the selection function, the id value was set. A return false solution to this problem.

 $('#sistema_select').autocomplete({ minLength: 3, source: <?php echo $lista_sistemas;?> , select: function (event, ui) { $('#sistema_select').val(ui.item.label); // display the selected text $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input return false; }, change: function( event, ui ) { $( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 ); } }); 

In addition, I added a function to the change event, because if the user writes something in the input or erases part of the element’s label after one element has been selected, I need to update the hidden field, t get the wrong (outdated) identifier. For example, if my source is:

 var $local_source = [ {value: 1, label: "c++"}, {value: 2, label: "java"}] 

and the user type ja and select the "java" option with autocomplete, I save the value 2 in a hidden field. If the user erases the letter from "java", for example, ending with "jva" in the input field, I cannot pass id 2 to my code because the user has changed the value. In this case, I set id to 0.

Answer 4

I just want to share what worked for me, in case it can help someone else. As an alternative based on Pati Lustosa's answer above, let me add another approach obtained on this site where he used the ajax approach for the source method

http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3

A kicker is the resulting "string" or json format from your php script (see below in php.php), which displays a set of results that will be displayed in the autocomplete field, should look something like this:

  {"list":[ {"value": 1, "label": "abc"}, {"value": 2, "label": "def"}, {"value": 3, "label": "ghi"} ]} 

Then in the original part of the autocomplete method:

  source: function(request, response) { $.getJSON("listing.php", { term: request.term }, function(data) { var array = data.error ? [] : $.map(data.list, function(m) { return { label: m.label, value: m.value }; }); response(array); }); }, select: function (event, ui) { $("#autocomplete_field").val(ui.item.label); // display the selected text $("#field_id").val(ui.item.value); // save selected id to hidden input return false; } 

Hope this helps ... all the best!

Answer 5

 <script type="text/javascript"> $(function () { $("#MyTextBox").autocomplete({ source: "MyDataFactory.ashx", minLength: 2, select: function (event, ui) { $('#MyIdTextBox').val(ui.item.id); return ui.item.label; } }); }); 

The above answers helped, but did not work in my implementation. Instead of setting the value using jQuery, I return the value from the function to the select parameter.

On the MyDataFactory.ashx page there is a class with three properties: Id, Label, Value.

Pass the list to the JavaScript serializer and return the answer.

Answer 6

Assuming the objects in your source array have the id property ...

 var $local_source = [ { id: 1, value: "c++" }, { id: 2, value: "java" }, { id: 3, value: "php" }, { id: 4, value: "coldfusion" }, { id: 5, value: "javascript" }, { id: 6, value: "asp" }, { id: 7, value: "ruby" }]; 

Getting the current instance and checking its selectedItem property allows you to get the properties of the current selceted element. In this case, a warning is issued about the identifier of the selected item.

 $('#button').click(function() { alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id; }); 

Answer 7

I don’t think that there is a need to break into the properties of values ​​and labels, use hidden input fields or suppress events. You can add your own custom property to each Autocomplete object and then read this property value later.

Here is an example.

 $(#yourInputTextBox).autocomplete({ source: function(request, response) { // Do something with request.term (what was keyed in by the user). // It could be an AJAX call or some search from local data. // To keep this part short, I will do some search from local data. // Let assume we get some results immediately, where // results is an array containing objects with some id and name. var results = yourSearchClass.search(request.term); // Populate the array that will be passed to the response callback. var autocompleteObjects = []; for (var i = 0; i < results.length; i++) { var object = { // Used by jQuery Autocomplete to show // autocomplete suggestions as well as // the text in yourInputTextBox upon selection. // Assign them to a value that you want the user to see. value: results[i].name; label: results[i].name; // Put our own custom id here. // If you want to, you can even put the result object. id: results[i].id; }; autocompleteObjects.push(object); } // Invoke the response callback. response(autocompleteObjects); }, select: function(event, ui) { // Retrieve your id here and do something with it. console.log(ui.item.id); } }); 

The documentation mentions that you should pass an array of objects with labels and values. However, you can pass objects with more than these two properties and read them later.

Here is the relevant part I'm talking about.

Array: An array can be used for local data. There are two supported Formats: an array of strings: ["Choice1", "Choice2"] An array of objects with a label and values: [{label: "Choice1", value: "value1"}, ...] The label property is displayed in the menu suggestion. The value will be inserted into the input element when the user selects the element. If only one property is specified, it will be used for both, for example, if you provide only value properties, this value can also be used as a label.

Answer 8

This can be done without using a hidden field. You must use JQuerys' ability to create custom attributes at runtime.

 ('#selector').autocomplete({ source: url, select: function (event, ui) { $("#txtAllowSearch").val(ui.item.label); // display the selected text $("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input } }); $('#button').click(function() { alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input }); 

Answer 9

Finally, I did it. Thanks to all my friends, and special thanks to Mr. https://stackoverflow.com/users/87015/salman-a because of his code, I was able to solve it correctly. finally, my code looks the way I use groovy grails, I hope this helps someone out there .. Thanks a lot

html code looks like this on my gsp page

  <input id="populate-dropdown" name="nameofClient" type="text"> <input id="wilhaveid" name="idofclient" type="text"> 

script Function is the same as on my gsp page

  <script> $( "#populate-dropdown").on('input', function() { $.ajax({ url:'autoCOmp', data: {inputField: $("#populate-dropdown").val()}, success: function(resp){ $('#populate-dropdown').autocomplete({ source:resp, select: function (event, ui) { $("#populate-dropdown").val(ui.item.label); $("#wilhaveid").val(ui.item.value); return false; } }) } }); }); </script> 

And my controller code is like this

  def autoCOmp(){ println(params) def c = Client.createCriteria() def results = c.list { like("nameOfClient", params.inputField+"%") } def itemList = [] results.each{ itemList << [value:it.id,label:it.nameOfClient] } println(itemList) render itemList as JSON } 

One more thing that I did not set in the id field hidden, because at first I checked that I get the exact identifier, you can keep it hidden, just put type = hidden instead of the text for the second input element in html

Thank!

Answer 10

I tried to display the code (value or identifier) ​​in a text box placed in the label text. After that I tried event.preventDefault () to work fine ...

 var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}] $(".jquery-autocomplete").autocomplete({ source: e,select: function( event, ui ) { event.preventDefault(); $('.jquery-autocomplete').val(ui.item.label); console.log(ui.item.label); console.log(ui.item.value); } }); 

Answer 11

Autocomplete text field binding using jquery

  ## HTML Code For Text Box and For Handling UserID use Hidden value ## <div class="ui-widget"> @Html.TextBox("userName") @Html.Hidden("userId") </div> 

---

Library required below

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

---

Jquery script

 $("#userName").autocomplete( { source: function (request,responce) { debugger var Name = $("#userName").val(); $.ajax({ url: "/Dashboard/UserNames", method: "POST", contentType: "application/json", data: JSON.stringify({ Name: Name }), dataType: 'json', success: function (data) { debugger responce(data); }, error: function (err) { alert(err); } }); }, select: function (event, ui) { $("#userName").val(ui.item.label); // display the selected text $("#userId").val(ui.item.value); // save selected id to hidden input return false; } }) 

The returned data must be below the format

---

  label = u.person_full_name, value = u.user_id