How to use source: function()... and AJAX in JQuery UI autocomplete
JavascriptJqueryAjaxJquery UiJquery Ui-AutocompleteJavascript Problem Overview
I need a little bit help with JQuery UI Autocomplete. I want my textfield (.suggest-user) display names from an AJAX request. This is what I have:
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
});
Any help is very much appreciated.
Javascript Solutions
Solution 1 - Javascript
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
// ["[email protected]", "[email protected]","[email protected]"]
// 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.
Solution 2 - Javascript
Try this code. You can use $.get instead of $.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) {}
});
Solution 3 - Javascript
$("#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);
}
}
});
Solution 4 - Javascript
On the .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>
In your .ASPX.CS code-behind file:
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;
}
}
Solution 5 - Javascript
This is completely new working code with sample AJAX call.
<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>
Solution 6 - Javascript
Set the auto complete:
$("#searchBox").autocomplete({
source: queryDB
});
The source function that gets the data:
function queryDB(request, response) {
var query = request.term;
var data = getDataFromDB(query);
response(data); //puts the results on the UI
}
Solution 7 - Javascript
When you ask about:
> Blockquote // But what now? How do I display my data? > Blockquote
you need to map an array of object, that way:
response([{label: 'result_name', value: 'result_id'},]);
That way when you use the select event of the autocomplete plugin, you can see the result bellow;
You can use the select event that way:
jQuery("#field").autocomplete({
source: function (request, response) {
},
minLength: 3,
select: function(event, ui)
{
console.log(ui);
}
});
I hope that it can help and complement the answers.
Solution 8 - Javascript
$("#subject_name").autocomplete({
source: function(request, response) {
$.ajax({
url: "api/listBasicsubject",
dataType: "json",
type: "post",
data: {
search: request.term
},
success: function(data) {
if (!data.length) {
var result = [{
label: 'Subject not found',
value: response.term
}];
response(result);
} else {
//response(data.data);
response($.map(data.data, function(item) {
return {
label: item.subject_name,
value: item.subject_id
}
}));
}
}
});
},
change: function(event, ui) {
if (ui.item == null) {
$("#subject_name").val("");
$("#subject_code").val("");
$("#subject_name").focus();
}
},
minLength: 0,
classes: {
"ui-autocomplete": "auto_compl-cat"
},
focus: function(event, ui) {
event.preventDefault();
// $("#subject_name").val(ui.item.label);
$("#subject_name").val(ui.item.label);
},
select: function(event, ui) {
if (ui.item.label == "Subject not found") {
$("#subject_name").val('');
$("#subject_code").val('');
event.preventDefault();
return false;
}
//console.log( "Selected: " + ui.item.label + " aka " + ui.item.value);
$("#subject_name").val(ui.item.label);
$("#subject_code").val(ui.item.value);
return false;
}
});