如何在 JQuery UI 自动完成中使用 source:function()... 和 AJAX

Posted 2023-05-08

【中文标题】如何在 JQuery UI 自动完成中使用 source:function()... 和 AJAX

【英文标题】：How to use source: function()... and AJAX in JQuery UI autocomplete

【发布时间】：2014-02-18 14:07:37

【问题描述】：

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

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;        // ["[e-mail]", "[e-mail]","[e-mail]"]
            return test;        // But what now? How do I display my data?
        );
    ,
    minLength : 3
);

非常感谢任何帮助。

【参考方案1】：

在您的 AJAX 回调中，您需要调用 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
            // ["[e-mail]", "[e-mail]","[e-mail]"]
            // and not a string
            response(data);
        );
    ,
    minLength: 3
);

如果响应 JSON 与 jQuery UI 自动完成接受的格式不匹配，那么您必须在 AJAX 回调中转换结果，然后再将其传递给响应回调。 See this question and the accepted answer.

【讨论】：

简单一点。 jQuery 自动完成支持 'source' 参数的获取 url。 source: "usernames.action" 。您的方法应该返回一个 json 数组，并且应该接受一个名为“term”的参数。

@Elisa：正确。 OP 在示例中使用了回调（可能是出于某种原因），所以我也照做了。

这对我不起作用...它返回列表中的所有项目，而不是与查询词匹配的项目。

OP 在服务器端过滤结果，这个答案是假设的。

@LoryLory 如果你想修改自动完成的建议列表，然后在 *** 中搜索“jquery ui autocomplete _renderItem”。

【参考方案2】：

试试这个代码。你可以用$.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) 
);

【参考方案3】：

$("#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);
        
    
);

【参考方案4】：

这是带有示例 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"  />
    <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>

【讨论】：

我看到您从 ajax 调用中获得了 jsonp 响应。回调函数叫什么名字？

【参考方案5】：

在.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;
        

【讨论】：

@Jaikrat 因为 GET 请求导致：“尝试使用 GET 请求调用方法 'GetAutoCompleteData'，这是不允许的。”见：***.com/questions/18703838/…

【参考方案6】：

设置自动完成：

$("#searchBox").autocomplete(
    source: queryDB
);

获取数据的源函数：

function queryDB(request, response) 
    var query = request.term;
    var data = getDataFromDB(query);
    response(data); //puts the results on the UI

【参考方案7】：

当您询问时：

块引用 // 但是现在呢？如何显示我的数据？ 块引用

你需要映射一个对象数组，这样：

response([label: 'result_name', value: 'result_id',]);

这样当你使用自动完成插件的选择事件时，你可以看到如下结果；

你可以这样使用 select 事件：

jQuery("#field").autocomplete(
      source: function (request, response) 

      ,
      minLength: 3,
      select: function(event, ui)
      
        console.log(ui);
      
  );

我希望它可以帮助和补充答案。

【参考方案8】：

$("#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;
  
);