jQuery UI autocomplete with item and id

Question

I have the following script which works with a 1 dimensional array   Is it possible to get this to work with a 2 dimensional array   Then whichever item is selected  by clicking on a second button on the page  should display the id of whichever item is selected   This is the script with the 1 dimensional array   var  local source     c      java    php    coldfusion    javascript    asp    ruby        txtAllowSearch   autocomplete       source   local source       This is the script for the button to check the id  which is incomplete       button   click function            alert     txtAllowSearch   someone get id of selected item

User · Accepted Answer

You need to use the ui item label  the text  and ui item value  the 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 the multi-dimensional array     You should be able create the array like so   var  local source     0  c       1  java     2  php     3  coldfusion                           4  javascript     5  asp     6  ruby       Read more about how to work with multi-dimensional arrays here  http   www javascriptkit com javatutors literal-notation2 shtml

User · Answer

My code only worked when I added  return false  to the select function  Without this  the input was set with the right value inside the select function and then it was set to the id value after the select function was over  The return false solved this problem       sistema select   autocomplete        minLength  3      source   lt  php echo  lista sistemas   gt        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 a part of the item label after one item was selected  I need to update the hidden field so that I don  t get the wrong  outdated  id  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 the autocomplete  I store the value 2 in the hidden field  If the user erase a letter from  java   por exemple ending up with  jva  in the input field  I can  t pass to my code the id 2  because the user changed the value  In this case I set the id to 0

User · Answer

Assuming the objects in your source array have an 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 hold of the current instance and inspecting its selectedItem property will allow you to retrieve the properties of the currently selceted item  In this case alerting the id of the selected item       button   click function         alert     txtAllowSearch   autocomplete  instance   selectedItem id

User · Answer

From the Overview tab of jQuery autocomplete plugin      The local data can be a simple Array   of Strings  or it contains Objects for   each item in the array  with either a   label or value property or both  The   label property is displayed in the   suggestion menu  The value will be   inserted into the input element after   the user selected something from the   menu  If just one property is   specified  it will be used for both    eg  if you provide only   value-properties  the value will also   be used as the label    So your  two-dimensional  array could look like   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 event through the ui argument using ui item label and ui item value   Edit  Seems like you have to  cancel  the focus and select events so that it does not place the id numbers inside the text boxes  While doing so you can copy the value in a hidden variable instead  Here is an example

User · Answer

This can be done without the use of hidden field  You have to take benefit of the JQuerys ability to make custom attributes on run time       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

User · Answer

I do not think that there is need to hack around the value and label properties  use hidden input fields or to suppress events  You may add your own custom property to each Autocomplete object and then read that 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 s 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  lt  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 you have to pass in an array of objects with label and value properties  However  you may certainly pass in objects with more than these two properties and read them later   Here is the relevant part I am referring to      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 label and value properties      label   Choice1   value     value1           The label property is displayed in the suggestion   menu  The value will be inserted into the input element when a user   selects an item  If just one property is specified  it will be used   for both  e g   if you provide only value properties  the value will   also be used as the label

User · Answer

Auto Complete Text box binding using Jquery       HTML Code For Text Box and For Handling UserID use Hidden value       lt div class  ui-widget  gt   Html TextBox  userName          Html Hidden  userId        lt  div gt      Below  Library s  is Required   lt link rel  stylesheet  href    code jquery com ui 1 12 1 themes base jquery-ui css  gt   lt link rel  stylesheet  href   resources demos style css  gt   lt script src  https   code jquery com jquery-1 12 4 js  gt  lt  script gt   lt script src  https   code jquery com ui 1 12 1 jquery-ui js  gt  lt  script gt      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             Return data Should be  below format     label   u person full name   value   u user id

User · Answer

I ve tried above code displaying  value or ID  in text-box insted of Label text  After that I ve tried event preventDefault   it s working perfectly      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

User · Answer

Just want to share what worked on my end  in case it would be able to help someone else too  Alternatively based on Paty Lustosa s answer above  please allow me to add another approach derived from this site where he used an ajax approach for the source method  http   salman-w blogspot ca 2013 12 jquery-ui-autocomplete-examples html example-3  The kicker is the resulting  string  or json format from your php script  listing php below  that derives the result set to be shown in the autocomplete field should follow something like this         list           value   1   label    abc           value   2   label    def           value   3   label    ghi            Then on the source portion 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

User · Answer

At last i did it Thanks alot friends  and a special thanks to Mr https   stackoverflow com users 87015 salman-a   because of his code i was able to solve it properly  finally my code is looking like this  as i am using groovy grails i hope this will help somebody there   Thanks  alot   html code looks like this in my gsp page     lt input id  populate-dropdown  name  nameofClient  type  text  gt     lt input id  wilhaveid  name  idofclient  type  text  gt    script Function is like this in my gsp page     lt script gt               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                                                                                                      lt  script gt    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   lt  lt   value it id label it nameOfClient            println itemList      render itemList as JSON     One more thing i have not set id field hidden because at first i was checking  that i am getting the exact id   you can keep it hidden just put type hidden instead of text for second input item in html  Thanks

User · Answer

lt script type  text javascript  gt    function              MyTextBox   autocomplete           source   MyDataFactory ashx           minLength  2          select  function  event  ui                    MyIdTextBox   val ui item id               return ui item label                            The above responses helped but  did not work in my implementation  The instead of using setting the value using jQuery  I am returning the value from the function to the select option   The MyDataFactory ashx page has a class with three properties Id  Label  Value   Pass the List into the JavaScript serializer  and return the response

[javascript] jQuery UI autocomplete with item and id

Examples related to javascript

Examples related to jquery

Examples related to arrays

Examples related to jquery-ui

Examples related to jquery-ui-autocomplete