How to use source function and AJAX in JQuery UI autocomplete

Question

I need a little bit help with JQuery UI Autocomplete  I want my textfield   suggest-user  display names from an AJAX request  This is what I have   jQuery  input suggest-user   autocomplete       source   function request  response            var name   jQuery  input suggest-user   val            jQuery get  usernames action query     name  function data                console log data       Ok  I get the data  Data looks like that              test   data              one abc de    onf abc de   ong abc de               return test            But what now  How do I display my data                         minLength   3       Any help is very much appreciated

User · Answer

This is completely new working code with sample AJAX call    lt link href  https   cdnjs cloudflare com ajax libs jqueryui 1 11 4 jquery-ui min css  rel  stylesheet    gt   lt script src  http   code jquery com jquery-1 9 1 min js  gt  lt  script gt   lt script src  http   code jquery com ui 1 10 3 jquery-ui min js  gt  lt  script gt    lt div gt       lt div id  project-label  gt Select a project  type  j  for a start   lt  div gt       lt img id  project-icon  src  images transparent 1x1 png  class  ui-state-default  alt      gt       lt input id  project    gt       lt input type  hidden  id  project-i    gt   lt  div gt      Auto Complete    lt script gt        function                   project   autocomplete               minLength  0              source   function  request  response                       ajax                       url   http   jsonplaceholder typicode com posts 1 comments                       dataType   jsonp                       data                            q  request term                                            success  function  data                            response  data                                                                         focus  function  event  ui                        project   val ui item label                   return false                             select  function  event  ui                        project   val ui item name                       project-id   val ui item email                                        return false                                        data  ui-autocomplete    renderItem   function  ul  item                    return     lt li gt                         data  ui-autocomplete-item   item                       append   lt a gt      item name     lt br gt     item email     lt  a gt                         appendTo ul                           lt  script gt

User · Answer

Inside your AJAX callback you need to call the response function  passing the array that contains items to display   jQuery  input suggest-user   autocomplete       source  function  request  response            jQuery get  usernames action                 query  request term            function  data                   assuming data is a JavaScript array such as                  one abc de    onf abc de   ong abc de                  and not a string             response data                          minLength  3       If the response JSON does not match the formats accepted by jQuery UI autocomplete then you must transform the result inside the AJAX callback before passing it to the response callback  See this question and the accepted answer

User · Answer

id   autocomplete        search  function            source  function  request  response                  ajax                        url                dataType   json               data                                term  request term                             success  function  data                                response data                                        minLength  2      select  function  event  ui                var test   ui item   ui item id   0          if  test  gt  0                       alert test

User · Answer

On the  ASPX page      lt    Page Language  C   AutoEventWireup  true   CodeFile  Default aspx cs  Inherits   Default    gt     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt      lt html xmlns  http   www w3 org 1999 xhtml  gt     lt head id  Head1  runat  server  gt           lt title gt AutoComplete Box with jQuery lt  title gt           lt link href  http   ajax googleapis com ajax libs jqueryui 1 8 1 themes base jquery-ui css  rel  stylesheet  type  text css   gt           lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 2 jquery min js  gt  lt  script gt           lt script type  text javascript  src  http   ajax googleapis com ajax libs jqueryui 1 8 1 jquery-ui min js  gt  lt  script gt             lt script type  text javascript  gt                document  ready function                     SearchText                                function SearchText                         autosuggest   autocomplete                       source  function request  response                              ajax                               type   POST                               contentType   application json  charset utf-8                               url   Default aspx GetAutoCompleteData                               data     username       document getElementById  txtSearch   value                                     dataType   json                               success  function  data                                    if  data    null                                         response data d                                                                                                error  function result                                    alert  Error                                                                                                                               lt  script gt     lt  head gt     lt body gt         lt form id  form1  runat  server  gt             lt div class  demo  gt              lt div class  ui-widget  gt               lt label for  tbAuto  gt Enter UserName   lt  label gt          lt input type  text  id  txtSearch  class  autosuggest    gt       lt  div gt           lt  form gt       lt  body gt       lt  html gt        In your  ASPX CS code-behind file   using System  using System Collections Generic  using System Data SqlClient  using System Web Services  using System Data   public partial class  Default   System Web UI Page       protected void Page Load object sender  EventArgs e                    WebMethod      public static List lt string gt  GetAutoCompleteData string username                List lt string gt  result   new List lt string gt                 SqlConnection con   new SqlConnection  Data Source YourDatasource Initial Catalog DatabseName uid sa password 123                 SqlCommand cmd   new SqlCommand  select DISTINCT Name from Address where Name LIKE      Name       con               con Open                    cmd Parameters AddWithValue   Name   username                   SqlDataReader dr   cmd ExecuteReader                     while  dr Read                                          result Add dr  Name   ToString                                       return result

User · Answer

Set the auto complete       searchBox   autocomplete       source  queryDB       The source function that gets the data   function queryDB request  response        var query   request term      var data   getDataFromDB query       response data     puts the results on the UI

User · Answer

subject name   autocomplete     source  function request  response          ajax         url   api listBasicsubject         dataType   json         type   post         data            search  request term                success  function data             if   data length              var result                  label   Subject not found               value  response term                         response result             else               response data data             response   map data data  function item                return                 label  item subject name                value  item subject id                                                               change  function event  ui        if  ui item    null              subject name   val                subject code   val                subject name   focus                  minLength  0    classes         ui-autocomplete    auto compl-cat          focus  function event  ui        event preventDefault               subject name   val ui item label            subject name   val ui item label            select  function event  ui        if  ui item label     Subject not found                subject name   val                subject code   val            event preventDefault          return false              console log   Selected      ui item label     aka     ui item value           subject name   val ui item label           subject code   val ui item value       return false

User · Answer

Try this code  You can use   get instead of   ajax      input suggest-user    autocomplete       source  function  request  response               ajax               dataType   json               type    Get               url   yourURL               success  function data                       input suggest-user   removeClass  ui-autocomplete-loading                         hide loading image                  response    map  data  function item                           your operation on data                                                 error  function data                       input suggest-user   removeClass  ui-autocomplete-loading                                           minLength  3      open  function           close  function           focus  function event ui          select  function event  ui

User · Answer

When you ask about      Blockquote      But what now  How do I display my data    Blockquote   you need to map an array of object  that way   response   label   result name   value   result id         That way when you use the select event of the autocomplete plugin  you can see the result bellow     You can use the select event that way   jQuery   field   autocomplete         source  function  request  response                    minLength  3        select  function event  ui                  console log ui                   I hope that it can help and complement the answers

[javascript] How to use source: function()... and AJAX in JQuery UI autocomplete

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to jquery-ui

Examples related to jquery-ui-autocomplete