How to Use Source: Function()... and Ajax in Jquery UI Autocomplete

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

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.

ajax with jquery ui autocomplete

The code is not tested. But I think this should be work for you. I am giving you some code snippet.

(function ($) {
  $(document).ready(function () {
      $('#my_ajax').autocomplete({
        // minChars: 1,
        source: function(request, response) {
          $.ajax({
            type: 'POST',
            dataType: 'json',
            url: devel_ajax.ajaxurl,
            data: 'action=my_ajax'+'&name='+request.term,
            success: function(data) {
              response( $.map( data, function( item ) {
                  var object = new Object();
                  object.label = item.Name;
                  object.value = item.Name;
                  object.ID = item.ID;
                  object.email = item.email;
                  object.website = item.website;
                  return object
              }));
              // response( $.map( data, function( item ) {
              //     return {
              //         label: item.title,
              //         value: item.title
              //     }
              // }));

            }
          });
        },
        select: function (event, ui) {
          $("#my_ajax").val(ui.item.value);
          $("#firstname").val(ui.item.value);
          $("#id").val(ui.item.ID);
          $("#email").val(ui.item.email);
          $("#website").val(ui.item.website);
         }
      });

  });

 })(jQuery);

jquery ui autocomplete with ajax data source

Try this:

$(document).ready(function () {
    var data = new Portalen.LitteraNumberData();
    $("#LitteraNumber").autocomplete({
        minLength: 1,
        source : function (request, response) {
            $.get("/Orders/GetLitteraNumbers", { customerId: request.term }, function (data) {
                response(data);
            });
        }
    });
});

I've replaced $("#CustomerId").val() by request.term. Moreover, the function does not need to return the response.

The $.get function is asynchronous so you cannot put it elsewhere.

JQuery UI AutoComplete AJAX call

You have misplaced select function. Move it out from source function and place parallel to the source function.

$('#autocompleteCR')
          .autocomplete({
              minLength: 0,
              source: function (request, response) {
                  $.ajax({
                      type: "POST",
                      contentType: "application/json; charset=utf-8",
                      url: './PayInvoicesWS.asmx/GetCheckRun',
                      data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}",
                      dataType: "json",
                      success: function (data) {
                          var rows = autocompleteJSONParseCode(data);
                          response(rows);
                      },
                      error: function (result) {
                          alert("Error");
                      }
                  });
              },
              select: function (event, ui) {
                          var checkRunData = $("#CheckRunDescription");
                          var checkRunID = $("#CheckRunID");
                          checkRunData.val(ui.item.label);
                          checkRunID.val(ui.item.value);

              }
          });

I have made a working example for what you are looking for:

https://jsfiddle.net/gschambial/d0g3dLvu/19/

$( "#tags" ).autocomplete({
  source: availableTags,
  select: function(event, ui) {
            alert('Label is :' + ui.item.label + ' and Value is : ' +ui.item.value);
    }
});

Change

function(el) {
return {
     CheckRunID: el.CheckRunID,
     Description: el.Description
     };
}));

To

function(el) {
return {
     value: el.CheckRunID,
     label: el.Description
     };
}));

and instead of

checkRunData.val(ui.item.CheckRunID + ui.item.Description);

use

checkRunData.val(ui.item.label + ui.item.value);

JQuery-ui autocomplete feature with id and value in response, but how to display value in autocomplete text box and id in hiddenbox text

Somehow it started working. Below is the solution. Will keep updating if I have any updates.

$("#employeeId").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "/searchEmployeeId",
      data: {
        term: request.term
      },
      success: function(data) {
        response($.map(data, function(item) {
          return {
            label: item[1],
            value: item[0]
          };
        }));
      }
    });
  },
  select: function(event, ui) {
    $("#employeeId").val(ui.item.label);
    $("#empId").val(ui.item.value);
    return false;
  },
  focus: function(event, ui) {
    $("#employeeId").val(ui.item.label);
    return false;
  },
  change: function(event, ui) {
    $("#employeeId").val(ui.item ? ui.item.label : 0);
  },
  minLength: 2
});
$("#employeeId").autocomplete("option", "appendTo", ".eventInsForm");

JQuery UI autocomplete with json and ajax

You can stick very much to the remote demo of jQuery UI's Autocomplete: http://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html

To get your results into the autocompleted list, you need to put a object with a label and a value to the response parameter (which is actually a function) inside your ajax success function:

source: function( request, response ) {
    $.ajax({
        url: "fill_id.php",
        data: {term: request.term},
        dataType: "json",
        success: function( data ) {
            response( $.map( data.myData, function( item ) {
                return {
                    label: item.title,
                    value: item.turninId
                }
            }));
        }
    });
}

But this will only work if you modify yor fill_id.php a bit:

// escape your parameters to prevent sql injection
$param   = mysql_real_escape_string($_GET['term']);
$options = array();

// fetch a title for a better user experience maybe..
$db = new SQLite3('database/main.db');
    $results = $db->query("SELECT distinct(turninId), title FROM main WHERE turninid LIKE '".$param."%'");

while ($row_id = $results->fetchArray()) {
    // more structure in data allows an easier processing
    $options['myData'][] = array(
        'turninId' => $row_id['turninId'],
        'title'    => $row_id['title']
    ); 
}

// modify your http header to json, to help browsers to naturally handle your response with
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

echo json_encode($options);

Of course, when you don't have a title or anything in your table, you can also just leave your response as it is and repeat the id in your success callback. Important is, that you fill your response function in the autocomplete with a value/item pair:

// this will probably work without modifying your php file at all:
response( $.map( data, function( item ) {
    return {
        label: item,
        value: item
    }
}));

edit:
updated the reference link to the new jquery UI's autocomplete ui

jQuery UI Autocomplete get input element on source function

this.element gets the current element on source function.

$(".suggest").autocomplete({
            delay: 100,
            source: function (request, response) {

                this.element.data("code"); 

                // Suggest URL
                var suggestURL = "http://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY";
                suggestURL = suggestURL.replace('%QUERY', request.term);

                // JSONP Request
                $.ajax({
                    method: 'GET',
                    dataType: 'jsonp',
                    jsonpCallback: 'jsonCallback',
                    url: suggestURL
                })
                .success(function(data){
                    response(data[1]);
                });
            }
        });

Working sample here

---

Related Topics