Come usare source: function () … e AJAX nel completamento automatico dell’interfaccia utente JQuery

Ho bisogno di un po ‘di aiuto con il completamento automatico dell’interfaccia utente di JQuery. Voglio che il mio campo di testo ( .suggest-user ) .suggest-user nomi da una richiesta AJAX. Questo è quello che ho:

 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; // ["[email protected]", "[email protected]","[email protected]"] return test; // But what now? How do I display my data? }); }, minLength : 3 }); 

Qualsiasi aiuto è molto apprezzato.

All’interno del tuo callback AJAX devi chiamare la funzione di response ; passando la matrice che contiene gli oggetti da visualizzare.

 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 // ["[email protected]", "[email protected]","[email protected]"] // and not a string response(data); }); }, minLength: 3 }); 

Se la risposta JSON non corrisponde ai formati accettati dall’autompletezza dell’interfaccia utente jQuery, è necessario trasformare il risultato all’interno del callback AJAX prima di passarlo alla richiamata della risposta. Vedi questa domanda e la risposta accettata .

Prova questo codice. Puoi usare $.get anziché $.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); } } }); 

Questo è un codice operativo completamente nuovo con una chiamata AJAX di esempio.

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

Nella pagina .ASPX :

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>    AutoComplete Box with jQuery       

Nel .ASPX.CS code-behind di .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 '%'[email protected]+'%'", con); con.Open(); cmd.Parameters.AddWithValue("@Name", username); SqlDataReader dr = cmd.ExecuteReader(); while (dr.Read()) { result.Add(dr["Name"].ToString()); } return result; } } 

Imposta il completamento automatico:

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

La funzione sorgente che ottiene i dati:

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

Quando chiedi informazioni su:

Blockquote // Ma che ora? Come posso visualizzare i miei dati? blockquote

devi mappare una serie di oggetti, in questo modo:

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

In questo modo quando si utilizza l’evento select del plug-in di completamento automatico, è ansible visualizzare il risultato seguente;

Risultato dell'evento selezionato

Puoi utilizzare l’evento select in questo modo:

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

Spero che possa aiutare e completare le risposte.