Comment utiliser source: function () ... et AJAX dans jQuery UI autocomplete
j'ai besoin d'un peu d'aide avec jQuery UI Autocomplete. Je veux que mon champ textfield ( .suggest-user
) affiche les noms d'une requête AJAX. C'est ce que j'ai:
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
});
Toute aide est très appréciée.
7 réponses
à l'intérieur de votre rappel AJAX vous devez appeler la fonction response
; en passant le tableau qui contient des éléments à afficher.
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
});
si la réponse JSON ne correspond pas aux formats acceptés par jQuery UI autocomplete alors vous devez transformer le résultat à L'intérieur du callback AJAX avant de le passer au callback de réponse. voir cette question et la réponse acceptée .
essayez ce code. Vous pouvez utiliser $.get
au lieu 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);
}
}
});
c'est un code de travail complètement nouveau avec un appel AJAX d'exemple.
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" />
<input id="project" />
<input type="hidden" id="project-i" />
</div>
@*Auto Complete*@
<script>
$(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 $("<li>")
.data("ui-autocomplete-item", item)
.append("<a> " + item.name + "<br>" + item.email + "</a>")
.appendTo(ul);
};
});
</script>
sur la .ASPX
page:
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AutoComplete Box with jQuery</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(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");
}
});
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<div class="ui-widget">
<label for="tbAuto">Enter UserName: </label>
<input type="text" id="txtSearch" class="autosuggest" />
</div>
</form>
</body>
</html>
dans votre fichier .ASPX.CS
derrière le code:
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<string> GetAutoCompleteData(string username)
{
List<string> result = new List<string>();
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;
}
}
régler l'auto complete:
$("#searchBox").autocomplete({
source: queryDB
});
la fonction source qui reçoit les données:
function queryDB(request, response) {
var query = request.term;
var data = getDataFromDB(query);
response(data); //puts the results on the UI
}
quand vous demandez à propos de:
Blockquote // Mais que faire maintenant? Comment puis-je afficher mes données? Blockquote
vous devez mapper un tableau d'objet, de cette façon:
response([{label: 'result_name', value: 'result_id'},]);
de cette façon, lorsque vous utilisez l'événement select du plugin autocomplete, vous pouvez voir le résultat ci-dessous;
vous pouvez utiliser l'événement choisi de cette façon:
jQuery("#field").autocomplete({
source: function (request, response) {
},
minLength: 3,
select: function(event, ui)
{
console.log(ui);
}
});
j'espère qu'il peut aider et compléter les réponses.