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;        // ["one@abc.de", "onf@abc.de","ong@abc.de"]
            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
            // ["one@abc.de", "onf@abc.de","ong@abc.de"]
            // 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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.