jQuery UI autocomplete with JSON

Question

Alright been racking my brain on this  im terrible at this  but yea ive tried reading all i can and still cant get it to work   trying to do autocomplete with jquery ui  my json looks like this    dealers                    1156   dealer 1             1122   dealer 2             1176   dealer 3             1491   dealer 4             1463   dealer 5             269   dealer 6            i am trying to use this information as the source for autocomplete   i am getting the response object just fine I am just having trouble getting it in the right format so that I can place the       in a hidden field tied to the  value  which needs to be displayed as the portion of the drop down   been trying a million different ways but a recent attempt was below  function ajaxCall           getJSON   example location example json term         dealerName   val            function data              each data dealers  function k  v                                    alert k           v                                      dealerName   autocomplete       source  ajaxCall      minLength  2      delay  100       Please and thank you much

User · Answer

I use this script for autocomplete         custmoers name   autocomplete       source  function  request  response                  getJSON   lt  php echo base url  index php Json cr operation autosearch custmoers     gt    function  data                getJSON  Json cr operation autosearch custmoers term     request term  function  data              console log data               response   map data  function  value  key                    console log value                   return                       label  value label                      value  value value                                                            minLength  1      delay  100       My json return  -    label   Mahesh Arun Wani   value   1    after search m  but it display in dropdown  object object

User · Answer

I understand that its been answered already  but I hope this will help someone in future and saves so much time and pain   complete code is below  This one I did for a textbox to make it Autocomplete in CiviCRM  Hope it helps someone  CRM     input id  custom 78     autocomplete               autoFill  true              select  function  event  ui                        var label   ui item label                      var value   ui item value                         Update subject field to add book year and book product                     var book year value   CRM    select id  custom 77   option selected   text   replace  Book Year                              book year value replace  Book Year                            var subject value   book year value         ui item label                      CRM     subject   val subject value                       CRM     input name product select id     val ui item value                       CRM    input id  custom 78    val ui item label                       return false                             source  function request  response                    CRM   ajax                       url  productUrl                          data                                             subCategory    cj  select id  custom 77    val                                             s   request term                                                             beforeSend  function  xhr                             xhr overrideMimeType   text plain  charset x-user-defined                                                 success  function result                                   result   jQuery parseJSON  result                                     console log result                                   response CRM   map result  function  val key                                                               console log key                                                              console log val                                                            return                                                                    label  val                                                                   value  key                                                                                                                                                                             done function  data                         if   console  amp  amp  console log                             console log   Sample of dataas    data slice  0  100                                                                      PHP code on how I m returning data to this jquery ajax call in autocomplete          This class contains all product related functions that are called using AJAX  jQuery      class CRM Civicrmactivitiesproductlink Page AJAX     static function getProductList              name     CRM Utils Array  value   s     GET         name     CRM Utils Type  escape   name   String          limit     10             strSearch    description LIKE    name               subCategory     CRM Utils Array  value   subCategory     GET         subCategory     CRM Utils Type  escape   subCategory   String              if   empty  subCategory                              strSearch      AND sub category      subCategory                      query    SELECT id   description as data FROM abc books WHERE  strSearch            resultArray   array             dao   CRM Core DAO  executeQuery   query            while    dao- gt fetch                     resultArray  dao- gt id     dao- gt data   creating the array to send id as key and data as value                   echo json encode  resultArray       CRM Utils System  civiExit

User · Answer

You need to transform the object you are getting back into an array in the format that jQueryUI expects   You can use   map to transform the dealers object into that array       dealerName   autocomplete       source  function  request  response              getJSON   example location example json term     request term  function  data                response   map data dealers  function  value  key                    return                       label  value                      value  key                                                            minLength  2      delay  100       Note that when you select an item  the  key  will be placed in the text box  You can change this by tweaking the label and value properties that   map s callback function return   Alternatively  if you have access to the server-side code that is generating the JSON  you could change the way the data is returned  As long as the data    Is an array of objects that have a label property  a value property  or both  or Is a simple array of strings   In other words  if you can format the data like this      value   1463   label   dealer 5      value   269   label   dealer 6       or this     dealer 5    dealer 6     Then your JavaScript becomes much simpler       dealerName   autocomplete       source    example location example json

[jquery] jQuery UI autocomplete with JSON

Examples related to jquery

Examples related to json

Examples related to jquery-ui

Examples related to autocomplete

Examples related to jquery-ui-autocomplete