Como usar o source: function ()… e o AJAX no autocomplete do JQuery UI

Eu preciso de um pouco de ajuda com o preenchimento automático de UI do JQuery. Eu quero meus nomes de exibição de .suggest-user ( .suggest-user ) de uma solicitação AJAX. Isso é o que eu tenho:

 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 }); 

Qualquer ajuda é muito apreciada.

    Dentro de seu retorno de chamada AJAX, você precisa chamar a function de response ; passando a matriz que contém itens para exibir.

     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 }); 

    Se a resposta JSON não corresponder aos formatos aceitos pelo preenchimento automático de UI do jQuery, você deverá transformar o resultado dentro do retorno de chamada do AJAX antes de transmiti-lo ao retorno de chamada de resposta. Veja esta pergunta e a resposta aceita .

    Tente este código. Você pode usar $.get vez de $.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) {} }); 
     $("#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 > 0) { alert(test); } } }); 

    Este é um código de trabalho completamente novo com uma chamada AJAX de amostra.

        
    Select a project (type "j" for a start):
    @*Auto Complete*@

    Na página .ASPX :

      < %@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   AutoComplete Box with jQuery       

    No seu .ASPX.CS code-behind .ASPX.CS :

     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 GetAutoCompleteData(string username) { List result = new List(); 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; } } 

    Definir o preenchimento automático:

     $("#searchBox").autocomplete({ source: queryDB }); 

    A function de origem que obtém os dados:

     function queryDB(request, response) { var query = request.term; var data = getDataFromDB(query); response(data); //puts the results on the UI } 

    Quando você pergunta sobre:

    Blockquote // Mas e agora? Como eu exibo meus dados? Bloco de citação

    você precisa mapear uma matriz de objects dessa maneira:

     response([{label: 'result_name', value: 'result_id'},]); 

    Dessa forma, quando você usa o evento select do plug-in de preenchimento automático, pode ver o resultado abaixo;

    Resultado do evento selecionado

    Você pode usar o evento select dessa maneira:

     jQuery("#field").autocomplete({ source: function (request, response) { }, minLength: 3, select: function(event, ui) { console.log(ui); } }); 

    Espero que possa ajudar e complementar as respostas.