Anklickbare Autovervollständigung, wie bei Google

Question

Ich bin auf der Suche nach einem Autocomplete, die keine "Submit"-Taste haben, aber dass, wenn der Benutzer auf das Autocomplete-Schlüsselwort klicken würde er zu einer anderen URL umgeleitet werden, die ich wählen werde

Ich benutze http://dyve.net/jquery/?autocomplete und ich möchte in diesem Skript zu implementieren, nicht verwenden Sie eine andere (denn wenn ich ODE in diesem ein, zeigt er CODE und auch ODESSA)

exemple :

Benutzer tippt "goo" dann erscheint GOOGLE für ihn, wenn er auf GOOGLE klickt, schickt ihn das Skript zu www.google.com (wie "Google"=>" http://www.google.com ")

Es wäre großartig, wenn ich einfach das Skript verwenden könnte, das ich euch gesagt habe. ich bin kein Programmierer, also brauche ich den Code selbst, ich weiß, es ist zu viel verlangt, aber ich habe alles versucht =\

Ich danke Ihnen!

---

das Problem bei jUI autocomplete ist, dass ich dies tun möchte:

wenn ich " tippe ODE "

würde es "C" anzeigen ODE " und auch " ODE SSA"

nicht nur am Anfang, deshalb versuche ich, Ihren Code in dem anderen zu verwenden

Auch als ich den Code von Russ und karim79 verwendet habe, hat es nicht funktioniert.

Answer 1

Ich habe etwas Ähnliches implementiert, allerdings macht meine Implementierung Gebrauch von jQuery UI Autocomplete .

Ich verwende einen einfachen Trick, bei dem die vom Server zurückgegebenen Daten eine Reihe von Zeichenketten sind, die durch ein Zeilenumbruchzeichen " \n ", in jeder Zeile steht eine Zeichenkette mit dem Format vorschlag::url . Auf dem Client teile ich einfach am Trennzeichen auf (ich verwende :: ) und extrahieren den Vorschlag aus dem ersten Offset des resultierenden Arrays und die URL aus dem zweiten. Beispiel:

    $("#search").autocomplete("/some/page", {
        selectFirst: false,
        formatItem: function(data, i, n, value) {
            //make the suggestion look nice
            return "<font color='#3399CC'>" + value.split("::")[0] + "</font>";
        },
        formatResult: function(data,value) {
            //only show the suggestions and not the URLs in the list
            return value.split("::")[0];
        }
    }).result(function(event, data, formatted) {
        //redirect to the URL in the string
        var pieces = formatted.split("::");
        window.location.href = pieces[1];
    });

Um zu verdeutlichen, was ich meine, nehmen wir an, Sie tippen "goo". Der Server könnte zurückgeben:

google::www.google.com\ngoodstuff::www.example.com

Der Benutzer sieht eine Liste mit "google" und "goodstuff" erscheinen. Wenn er auf einen dieser Einträge klickt, wird die result Methode von Autocomplete, bei der ich einfach den URL-Teil der Zeichenfolge nehme und weiterleite. Hoffentlich hilft das.

Answer 2

Hier ist ein Vollständiger Überblick über die Erstellung einer automatischen Vervollständigungssuche .

Im Wesentlichen benötigen Sie einen Event-Handler, der die

window.location.href = "your-url-string.com";

wenn Sie die Eingabetaste drücken oder auf eine Auswahl klicken.

EDITAR:

Von der Dokumentation zum automatischen Vervollständigen

Ersetzen der Suchseite

Ein Autocomplete-Plugin kann verwendet werden, um nach einem Begriff zu suchen und auf eine Seite umzuleiten, die mit einem Ergebnis verbunden ist. Folgendes ist eine Möglichkeit, die die Weiterleitung:

var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
  formatItem: function(item) {
    return item.text;
  }
}).result(function(event, item) {
  location.href = item.url; // navigate to the chosen URL
});

Answer 3

"aber selbst der Autor weiß nicht, wie man das macht" ?

Ich denke, es ist leicht zu machen, indem man die Message-Box-Warnung ersetzt (in der Beispielseite ) mit einem Aufruf von form.submit(). Ich habe es aber nicht ausprobiert.

Bearbeiten: Hier ist ein Beispielcode mit http://dyve.net/jquery/?autocomplete :

$("#mytextbox").autocomplete("form.php", {onItemSelect:submitTheForm});

function submitTheForm(){ 
     // redirect user to whatever URL
}

Answer 4

Der folgende Code funktioniert gut für mich, um ein Suchfeld mit Daten in einer entfernten Datenquelle (MySQL-Datenbank) in ein Suchfeld UND einen Redirector zu verwandeln, wenn ein Benutzer eines der vorgeschlagenen Ergebnisse auswählt:

$("#search").autocomplete("search.php", {
    width: 260,
    formatItem: function(data) {
            return data[0];
          }
        }).result(function(event, data) {
     window.location.href = data[1];
});

Hinweis: Ich musste die Ajax-Daten in zwei Teile aufteilen:

1. den Suchbegriff
2. die URL zu diesem Begriff

z. B.

Brad Pitt|/Schauspieler/Bradpitt

Matt Damon|/schauspieler/mattdamon

jQuery autocomplete trennt die Daten automatisch an der Pipe (|) und pro neuer Zeile

Answer 5

Das jQuery Autocomplete-Plugin hat eine matchContains-Option, die innerhalb des Ergebnisses sucht. Setzen Sie es auf true und es wird Teilstring Übereinstimmungen als gut zurück.