jQueryUI automatische Vervollständigung mit anklickbaren Ergebnisse

Question

Ich habe versucht, für ähnliche Fälle suchen und ich fand einige, aber jedes Mal, wird der Code etwas anders ist und ich es nicht schaffen, die Lösung zu finden ...

Ich bin Verwenden von jQuery Autocomplete auf meiner Website mit Daten aus einer MySQL-Datenbank.
Die Ergebnisse sind nach Kategorien sortiert, um sowohl Produkte als auch Marken in der gleichen Eingabe anzuzeigen
Also habe ich natürlich das Beispiel von ihrer Website auf meiner eingefügt und es funktioniert gut!
Die erzeugten json so aussieht

{"label":"Product 1","url":"product.php?id=1","category":"Products"} 

Mein einziges Problem ist, dass ich Ergebnisse möchte klickbare sein. Wenn der Benutzer also auf ein Ergebnis klickt, wird anstelle des Standardverhaltens eine andere Seite geladen, die die Eingabe mit den Daten füllt.

ich eine Demo auf jsfiddle erstellt haben, so können Sie sehen, was passiert
http://jsfiddle.net/fJ22W (Daten in den js hier enthalten sind)

Ihre Hilfe ist mehr als willkommen, ich denke, das ist nicht so eine große Sache, aber mein armes Fähigkeiten in jQuery hindert mich, dieses Problem zu lösen ...

Bertrand

Answer 1

Verwenden Sie die select-Ereignis:

$("#search").catcomplete({ 
     source: 'suggest_zip.php', 
     select: function(event, ui) { 
      window.location = ui.item.url; 
     } 
    }); 

Offensichtlich möchten Sie einige Validierung rund um die URL etc.

Für was es wert ist, würde ich auch empfehlen, die Standard-Autocomplete-Widget und die Verwendung der Ereignisse und Optionen, anstatt zu versuchen, davon zu erben. Ihr Code wird viel sauberer und weniger Chance für seltsame Bugs.