2011-07-03 89 views
3

我在我的網站上使用jquery的自動完成功能。現在它生成的菜單中有可以點擊的鏈接。Jquery自動完成鏈接

但是,當您點擊它們時,他們只需進入文本字段。我希望能夠點擊鏈接(或按回車)並轉到另一個頁面,特別是更改URL的get變量。

爲了使這個更復雜一點,下拉菜單中的每個項目都由我的mysql數據庫分配一個ID。每個項目應該連接的鏈接是index.php?id=$id,其中$id是來自數據庫的ID。

由於我在菜單中有數百個項目,我如何更改當前代碼以包含重定向到index.php?id=$id從我的數據庫中獲得$id的鏈接?

CODE:從http://jqueryui.com/demos/autocomplete/

<script> 
$(function() { 
    var availableTags = [ 
     <?php 
     include 'connect.php'; 

     $result=mysql_query("SELECT * FROM searchengine"); 

     while ($row=mysql_fetch_assoc($result)){ 

     $title=$row['title']; 
     $id=$row['id']; 

     echo "\"$title\","; 

     } 


     ?> 
    ]; 
    $("#tags").autocomplete({ 
     source: availableTags 

    }); 

}); 
</script> 

P.S. 標準代碼我在jQuery中使用php來生成一個變量列表。

回答

1

改變你的迴音標題行呼應<a href="index.php?id=$id>$title</a>;

+0

呃......上面顯示的當前代碼正在工作。我關心的是把這些項目變成鏈接。 – user780483

1

因爲我不知道PHP,我不能幫你的服務器端的代碼,但它應該是很容易弄清楚一旦你理解了自動完成可以使用的不同數據。

對於控件的數據源,您可以指定一個具有labelvalue屬性的對象數組。您可以利用value屬性來存儲數據庫中的id,然後定義select事件的事件處理程序以將用戶發送到正確的頁面。

下面是一個例子:

$("input").autocomplete({ 
    source: [ 
     { label: "Home", value: '3' }, 
     { label: "Admin", value: '4' }, 
     { label: "Search", value: '55' } 
    ], 
    select: function(event, ui) { 
     /* Prevent the input from being populated: */ 
     event.preventDefault(); 
     /* Use ui.item.value to access the id */ 
     window.location.href = "/index.php?id=" + ui.item.value; 
    } 
}); 

這裏有一個工作(簡單的)例子:http://jsfiddle.net/j2JUb/

作爲一個側面說明,如果你有一噸的可能,我會考慮使用remote datasource選項,自動完成提供結果。

+0

我不能讓代碼工作。有什麼建議麼? – user780483

+0

我得到的代碼工作,但preventDefault無法正常工作。它也可以在jfiddle示例中工作 – user780483

+0

@ user780483:我正在使用FF 4.0和Chrome 12,並且在單擊某個項目時,輸入中都沒有填充。儘管如此,你可以嘗試'返回false'。 –

0

不知道您是否仍在嘗試進行排序。這裏是我使用的solution

基本上,你得到(使用get方法)你正在傳輸的id(或搜索查詢),然後做一個基於它的mysql查詢。返回的內容之一是id,然後將其附加到URL的一部分。

例如,我需要攻擊類別:

<script type="text/javascript"> 
        function test(){ 
         var i = document.createElement('input'); 
         i.type = 'hidden'; 
         i.name = 'cat'; 
         i.value = cat; 
         document.getElementById("searchForm").appendChild(i); 
        } 

       </script> 

我用我的表格後,這一權利。這附加類別名稱作爲提交的網址的一部分。 (例如,& cat = dfgdfg)。你可以用你的ID做同樣的事情。

最適合我的選項是,在提交時,數據庫將再次被查詢,並使用id(以及重定向)將您帶到想要的頁面。

希望是有道理的。

綜上所述:你處理它越來越是你想要的頁面相關聯的編號的方法,這是連接到您提交的任務(例如的onsubmit =「的search.php = $ ID」。)