2009-09-01 11 views
7

Ich suche nach einem Autovervollständigung, die keine Schaltfläche „Senden“, aber das, wenn der Benutzer klicken Sie auf das Schlüsselwort zur automatischen Vervollständigung er auf eine andere URL umgeleitet werden würde, dass ichklickbare die automatische Vervollständigung, wie Google

wählen, wird i bin mit http://dyve.net/jquery/?autocomplete und ich würde in diesem Skript implementieren möchten, keine andere verwenden (weil, wenn ich ODE in diesem einen Typ, er CODE zeigt und auch ODESSA)

Beispiel:

Benutzertyp ‚goo‘ erscheint dann für ihn GOOGLE, wenn er auf GOOGLE das Skript sendet ihn an www.google.com (wie „Google“ => „http://www.google.com“)

, es wäre toll, wenn ich nur mit dem Skript tun konnte, ich habe dir gesagt, Jungs ich bin kein Programmierer, so dass ich wie brauchen, der Code selbst, ich weiß, es ist zu viel zu fragen, aber ich habe alles versucht = \

danke!


das Problem bei Jui der automatischen Vervollständigung ist, dass ich dies tun will:

wenn i "ODE"

es würde zeigen, "C ODE" und auch "ODE Typen SSA "

nicht nur am Anfang, deshalb versuche ich, Ihren Code in diesem anderen

zu verwenden

auch, wenn ich Russ und Karim79 Code verwendet, hat es nicht funktioniert

Antwort

2

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

Ich denke, es ist leicht durch Ersetzen der Message-Box-Alarm (in der example page) durch einen Aufruf von form.submit(). Ich habe es jedoch nicht ausprobiert.

Edit: Hier einige Beispiel-Code ist http://dyve.net/jquery/?autocomplete mit:

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

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

Das war mein erster Gedanke; aber ich bin nicht so gut mit js oder jQuery. Ich nahm an, dass mir etwas fehlte. Ich wäre interessiert zu wissen, ob es das Problem gelöst hat. –

+0

Das würde funktionieren. Die richtige URL für das jquery-Autocomplete-Projekt lautet jetzt http://code.google.com/p/jquery-autocomplete. – dyve

3

Hier ist ein complete walkthrough on how to build an autocomplete search.

Im Wesentlichen müssen Sie einen Ereignishandler haben

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

auf die Eingabetaste drücken oder klicken auf eine Auswahl zu nennen.

EDIT:

Vom autocomplete documentation

Search Ersatz

Eine Autocomplete-Plugin kann für einen Zeitraum zu Suche verwendet werden und auf eine Seite umleiten, die mit ein resultierender Artikel. Hier finden Sie eine Möglichkeit, die Umleitung zu erreichen:

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

ich so etwas umgesetzt, aber meine Implementierung Verwendung von jQuery UI Autocomplete macht.

ich einen einfachen Trick verwenden, wobei die vom Server zurückgegebenen Daten durch ein Newline-Zeichen „\ n“ gibt es in jeder Zeile getrennt eine Reihe von Strings ist eine Zeichenkette mit dem Format Vorschlag :: url. Auf dem Client spalte ich einfach am Trennzeichen (ich verwende ::) und extrahiere den Vorschlag vom ersten Offset des resultierenden Arrays und der URL vom 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 Sie an, Sie geben "goo" ein. Der Server kann zurück:

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

Das Benutzer sieht eine Liste angezeigt mit ‚Google‘ und ‚Goodstuff‘. Klickt man auf einen davon, wird die Methode result von Autocomplete ausgeführt, wobei ich einfach den URL-Teil der Zeichenfolge und Umleitung nehme. Ich hoffe, das hilft.

+4

Kannst du JSON nicht zurückgeben und dann kannst du die hässliche String-Aufteilung überspringen? – Martin

0

Das jQuery Autocomplete-Plugin verfügt über eine matchContains-Option, die im Ergebnis sucht. Setzen Sie es auf "True" und es werden auch Teilstrings zurückgegeben.

1

der folgende Code funktioniert gut für mich ein Suchfeld mit Daten in einer fernen Datenquelle (MySQL-Datenbank) in ein Suchfeld und ein Redirector zum Drehen, wenn ein Benutzer eine der vorgeschlagenen Ergebnisse wählt:

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

Anmerkung: ich hatte die ajax-Daten in zwei Teile getrennt zu machen:

  1. die Suchbegriff
  2. der diesen Begriff im Zusammenhang URL

z.

Brad Pitt |/Schauspieler/Bradpitt

Matt Damon |/Schauspieler/Matt Damon

jQuery Autocomplete trennt automatisch die Daten an der Pipe (|) und pro neue Linie

0

einfachstes Beispiel können Sie finden Sie unter JSFiddle

var data = [ 
    { 
     value: 'Google', 
     url: 'http://www.google.com' 
    }, 
    { 
     value: 'StackOverflow', 
     url: 'http://www.stackoverflow.com' 
    } 
]; 

$("input").autocomplete({ 
    source: data, 
    select: function(event, ui) { 
     window.location = ui.item.url; 
    } 
}); 
Verwandte Themen