javascript - ejemplo - jquery combobox
Cómo usar source: function()... y AJAX en JQuery UI autocomplete (7)
Cuando preguntas acerca de:
Blockquote // ¿Pero ahora qué? ¿Cómo puedo mostrar mis datos? Blockquote
necesitas mapear una matriz de objetos, de esa manera:
response([{label: ''result_name'', value: ''result_id''},]);
De esta forma, cuando utiliza el evento select del complemento autocompletar, puede ver el resultado a continuación;
Puede usar el evento select de esa manera:
jQuery("#field").autocomplete({
source: function (request, response) {
},
minLength: 3,
select: function(event, ui)
{
console.log(ui);
}
});
Espero que pueda ayudar y complementar las respuestas.
Necesito un poco de ayuda con JQuery UI Autocomplete. Quiero que mi campo de texto ( .suggest-user ) muestre los nombres de una solicitud AJAX. Esto es lo que tengo:
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
});
Cualquier ayuda es muy apreciada.
Dentro de su devolución de llamada AJAX necesita llamar a la función de response ; pasando la matriz que contiene elementos para mostrar.
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
});
Si la respuesta JSON no coincide con los formatos aceptados por jQuery UI autocomplete, entonces debe transformar el resultado dentro de la devolución de llamada AJAX antes de pasarlo a la devolución de llamada de respuesta. Vea esta pregunta y la respuesta aceptada .
En la 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">
<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>
En su .ASPX.CS código subyacente:
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;
}
}
Establecer el autocompletado:
$("#searchBox").autocomplete({
source: queryDB
});
La función fuente que obtiene los datos:
function queryDB(request, response) {
var query = request.term;
var data = getDataFromDB(query);
response(data); //puts the results on the UI
}
Este es un código de trabajo completamente nuevo con una llamada de muestra AJAX.
<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>
Prueba este código Puede usar $.get lugar 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);
}
}
});