2013-03-25 96 views
0

我想使用jQuery UI autocomplete,以便用戶可以搜索項目。jQuery UI自動完成搜索

我有一個需要製作成JSON的產品列表(或者只是將它們包含在JavaScript中,就像jQuery UI的演示版一樣),但是當用戶選擇一個項目時,它會重定向到URL嗎?

在jQuery用戶界面的演示,他們有:

$(function() { 
    var availableTags = [ 
    "ActionScript", 
    "AppleScript", 
    "Asp", 
    "BASIC", 
    "C", 
    "C++", 
    "Clojure", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Haskell", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme" 
    ]; 
    $("#tags").autocomplete({ 
    source: availableTags 
    }); 
}); 

我在哪裏可以添加一個網址爲每個項目因此,當用戶選擇它,它會重定向頁面?

+0

Chekc出http://api.jqueryui.com/autocomplete/和'select'事件。 – Jack 2013-03-25 21:01:51

+0

看看[自定義數據示例](http://jqueryui.com/autocomplete/#custom-data)。 – Mathletics 2013-03-25 21:02:24

回答

1

如果你傳遞一個名爲value的屬性的對象,那麼jQuery將使用它作爲顯示值。然後,您可以使用select方法的自動完成處理該事件:

var availableTags = [ 
    {value: "ActionScript", url:"http://www.google.com?q=ActionScript"}, 
    {value: "jquery", url:"http://www.google.com?q=jquery"} 
    ]; 
    $("#tags").autocomplete({ 
     source: availableTags, 
     select:function(event, ui) { 
     window.open(ui.item.url);   
    } 
    }); 

例小提琴:http://jsfiddle.net/9qePM/

+0

啊哈,我明白了。這幫了我很大的時間,謝謝! – user2203362 2013-03-25 21:15:56