Verwendung von source: function ()… und AJAX in der automatischen Vervollständigung der JQuery-Benutzeroberfläche

78

Ich benötige ein wenig Hilfe bei der automatischen Vervollständigung der JQuery-Benutzeroberfläche. Ich möchte, dass meine textfield ( .suggest-user) -Namen aus einer AJAX-Anfrage angezeigt werden. Das habe ich:

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
});

Jede Hilfe wird sehr geschätzt.

javascript jquery ajax jquery-ui jquery-ui-autocomplete Bernie
quelle

Antworten:

153

In Ihrem AJAX-Rückruf müssen Sie die responseFunktion aufrufen . Übergeben des Arrays, das die anzuzeigenden Elemente enthält.

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
});

Wenn der Antwort-JSON nicht mit den von der automatischen Vervollständigung der jQuery-Benutzeroberfläche akzeptierten Formaten übereinstimmt, müssen Sie das Ergebnis innerhalb des AJAX-Rückrufs transformieren, bevor Sie es an den Antwortrückruf übergeben. Siehe diese Frage und die akzeptierte Antwort .

Salman A.
quelle
2
Es ist ein bisschen einfacher. Die automatische Vervollständigung von jQuery unterstützt eine get-URL für den Parameter 'source'. source: "usernames.action" . Ihre Methode sollte ein JSON-Array zurückgeben und einen Parameter namens "term" akzeptieren.
Elisabeth
@ Elisa: richtig. Das OP hat im Beispiel einen Rückruf verwendet (möglicherweise aus einem bestimmten Grund), also bin ich diesem Beispiel gefolgt.
Salman A
Dies funktioniert bei mir nicht ... es werden alle Elemente in der Liste zurückgegeben, anstatt derjenigen, die dem Abfragebegriff entsprechen.
Geoidesic
OP filtert die Ergebnisse auf der Serverseite. Diese Antwort setzt dies voraus.
Salman A
1
@LoryLory Wenn Sie die Vorschlagsliste der Autovervollständigung ändern möchten, durchsuchen Sie den Stackoverflow nach "jquery ui autocomplete _renderItem".
Salman A
33

Versuchen Sie diesen Code. Sie können $.getanstelle von verwenden$.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) {}
});
Premshankar Tiwari
quelle
18 
$("#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);
        }
    }
});
vignesh.D
quelle
5

Dies ist ein völlig neuer Arbeitscode mit Beispiel-AJAX-Aufruf.

<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>
Girish Gupta
quelle
Ich sehe, Sie erhalten eine JSONP-Antwort vom Ajax-Aufruf. Wie heißt die Rückruffunktion?
Miro Lehtonen
5

Auf der .ASPXSeite:

  <%@ 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 Ihrer .ASPX.CSCodeBehind-Datei:

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;
        }
}
Kavitha Reddy
quelle
1
@Jaikrat Weil eine GET-Anfrage Folgendes verursacht: "Es wurde versucht, die Methode 'GetAutoCompleteData' mit einer GET-Anfrage aufzurufen, was nicht zulässig ist." Siehe: stackoverflow.com/questions/18703838/…
NickG
5

Stellen Sie die automatische Vervollständigung ein:

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

Die Quellfunktion, die die Daten erhält:

function queryDB(request, response) {
    var query = request.term;
    var data = getDataFromDB(query);
    response(data); //puts the results on the UI
}
Oded Breiner
quelle
3

Wenn Sie fragen nach:

Blockquote // Aber was jetzt? Wie zeige ich meine Daten an? Blockquote

Sie müssen ein Array von Objekten folgendermaßen zuordnen:

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

Auf diese Weise können Sie das Ergebnis unten sehen, wenn Sie das Auswahlereignis des Plugins für die automatische Vervollständigung verwenden.

Ergebnis des ausgewählten Ereignisses

Sie können das Auswahlereignis folgendermaßen verwenden:

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

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

Ich hoffe, dass es helfen und die Antworten ergänzen kann.

Paulo Teixeira
quelle
0 
$("#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;
  }
});
Midhu
quelle