如何在JQuery UI自动完成中使用source：function（）…和AJAX
我需要JQuery UI自动完成的一些帮助。 我想从AJAX请求中.suggest-user我的textfield（ .suggest-user ）显示名称。 这是我的：
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 });
任何帮助非常感谢。
在您的AJAXcallback中，您需要调用response函数; 传递包含项目的数组以显示。
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 });
如果响应JSON与jQuery UI自动完成接受的格式不匹配，那么您必须先将AJAXcallback中的结果转换为响应callback。 看到这个问题和接受的答案 。
试试这个代码。 您可以使用$.get而不是$.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); } } });
在.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>
在.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<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; } }
设置自动完成：
$("#searchBox").autocomplete({ source: queryDB });
获取数据的源函数：
function queryDB(request, response) { var query = request.term; var data = getDataFromDB(query); response(data); //puts the results on the UI }
当你问到：
Blockquote //但是现在呢？ 如何显示我的数据？ 大段引用
你需要映射一个对象的数组，那样：
response([{label: 'result_name', value: 'result_id'},]);
这样当你使用自动完成插件的select事件时，你可以看到下面的结果。
您可以使用select事件：
jQuery("#field").autocomplete({ source: function (request, response) { }, minLength: 3, select: function(event, ui) { console.log(ui); } });
我希望它能帮助和补充答案。
这是带有示例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>
- 防止页面加载JQuery表单提交与无显示button
- jQuery AJAX提交表单
- jquery / Ajax表单提交（enctype =“multipart / form-data”）。 为什么'contentType：False'在PHP中导致未定义的索引？
- 在PHP和Javascript之间传输数组的最佳方法
- jQuery – 非法调用
- 从.ajax（）调用数据的jQuery .find（）返回“”，而不是div
- 了解AJAX CORS和安全性考虑
- Web Worker处理AJAX调用 – 优化过度杀毒？
- 有没有一个标准的方法来编码一个.NETstring为JavaScriptstring在MS Ajax中使用？
