blocks|key|163369|text|在AJAX回调中，需要调用response函数；传递包含要显示的项的数组。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|163370|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
});|code-block|syntax|javascript|163371|如果响应JSON与AJAX+UI+autocomplete接受的格式不匹配，那么在将结果传递给响应回调之前，必须在jQuery回调中对其进行转换。See+this+question+and+the+accepted+answer。|163372|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/q/5077409/87015^0|D|8|0|0|21|15|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Inside your AJAX callback you need to call the <code>response</code> function; passing the array that contains items to display.</p>

<pre><code>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
});
</code></pre>

<p>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. <a href="https://stackoverflow.com/q/5077409/87015">See this question and the accepted answer</a>.</p>


blocks|key|163387|text|$("#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);
++++++++}
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|163388|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("#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 &gt; 0)
        {
           alert(test);
        }
    }
});
</code></pre>


blocks|key|4669542|text|试试这段代码。您可以使用$.get而不是$.ajax|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4669543|$(+"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)+{}
});|code-block|syntax|javascript|4669544|entityMap^0|C|5|K|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Try this code. You can use <code>$.get</code> instead of <code>$.ajax</code></p>

<pre><code>$( "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) {}
});
</code></pre>


blocks|key|163423|text|在.ASPX页面上：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|163424|++<%25@+Page+Language="C#"+AutoEventWireup="true"++CodeFile="Default.aspx.cs"+Inherits="_Default"+%25>
++<!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':'"+%2B+document.getElementById('txtSearch').value+%2B+"'}",
++++++++++++++++++++++++++++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>++++|code-block|syntax|javascript|163425|在.ASPX.CS代码隐藏文件中：|163426|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+'%25'%2B@Name%2B'%25'",+con);
++++++++++++con.Open();
++++++++++++++++cmd.Parameters.AddWithValue("@Name",+username);
++++++++++++++++SqlDataReader+dr+=+cmd.ExecuteReader();

++++++++++++++++while+(dr.Read())
++++++++++++++++{
++++++++++++++++++++result.Add(dr["Name"].ToString());
++++++++++++++++}
++++++++++++++++return+result;
++++++++}
}|163427|entityMap^0|1|5|0|0|1|8|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>On the <code>.ASPX</code> page:</p>

<pre><code>  &lt;%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head id="Head1" runat="server"&gt;
        &lt;title&gt;AutoComplete Box with jQuery&lt;/title&gt;
        &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/&gt;
        &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"&gt;&lt;/script&gt;  
        &lt;script type="text/javascript"&gt;
            $(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");
                            }
                        });
                    }
                });
            }
        &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;div class="demo"&gt;
           &lt;div class="ui-widget"&gt;
            &lt;label for="tbAuto"&gt;Enter UserName: &lt;/label&gt;
       &lt;input type="text" id="txtSearch" class="autosuggest" /&gt;
    &lt;/div&gt;
        &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;    
</code></pre>

<p>In your <code>.ASPX.CS</code> code-behind file:</p>

<pre><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&lt;string&gt; GetAutoCompleteData(string username)
    {
        List&lt;string&gt; result = new List&lt;string&gt;();
            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;
        }
}
</code></pre>


blocks|key|163452|text|这是使用示例AJAX调用的全新工作代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163453|<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>+"+%2B+item.name+%2B+"<br>"+%2B+item.email+%2B+"</a>")
++++++++++++++++++++.appendTo(ul);
++++++++++++};
++++});
</script>|code-block|syntax|javascript|163454|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is completely new working code with sample AJAX call.</p>

<pre><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" /&gt;
&lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;

&lt;div&gt;
    &lt;div id="project-label"&gt;Select a project (type "j" for a start):&lt;/div&gt;
    &lt;img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" /&gt;
    &lt;input id="project" /&gt;
    &lt;input type="hidden" id="project-i" /&gt;
&lt;/div&gt;


@*Auto Complete*@
&lt;script&gt;
    $(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 $("&lt;li&gt;")
                    .data("ui-autocomplete-item", item)
                    .append("&lt;a&gt; " + item.name + "&lt;br&gt;" + item.email + "&lt;/a&gt;")
                    .appendTo(ul);
            };
    });
&lt;/script&gt;
</code></pre>


blocks|key|163491|text|设置自动完成：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163492|$("#searchBox").autocomplete({
++++source:+queryDB
});|code-block|syntax|javascript|163493|获取数据的源函数：|163494|function+queryDB(request,+response)+{
++++var+query+=+request.term;
++++var+data+=+getDataFromDB(query);
++++response(data);+//puts+the+results+on+the+UI
}|163495|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Set the auto complete:</p>

<pre><code>$("#searchBox").autocomplete({
    source: queryDB
});
</code></pre>

<p>The source function that gets the data:</p>

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


blocks|key|4669632|text|$("#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:+"+%2B+ui.item.label+%2B+"+aka+"+%2B+ui.item.value);
++++$("#subject_name").val(ui.item.label);
++++$("#subject_code").val(ui.item.value);
++++return+false;
++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4669633|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre class="lang-js prettyprint-override"><code>$("#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;
  }
});
</code></pre>


<p>I need a little bit help with JQuery UI Autocomplete. I want my textfield (<code>.suggest-user</code>) display names from an AJAX request. This is what I have:</p>

<pre><code>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
});
</code></pre>

<p>Any help is very much appreciated.</p>


How to use source: function()... and AJAX in JQuery UI autocomplete

jQuery

JSON

我需要一点关于JQuery UI自动完成的帮助。我希望我的文本字段(.suggest-user)显示来自AJAX请求的名称。这就是我所拥有的：jQuery("input.suggest-user").autocomplete({    source : function(request, response) {    ...

问如何使用source: function()...和JQuery UI autocomplete中的AJAX
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用source: function()...和JQuery UI autocomplete中的AJAXEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用source: function()...和JQuery UI autocomplete中的AJAX
EN