2011-04-13 299 views
0

我正在從數據庫中讀取卡拉OK清單,但效果很好,但我想要的是能夠在搜索表單中輸入字符串,並且在我輸入字符串時開始加載歌曲和/或藝術家比賽。jQuery自動完成

我知道我需要什麼的基礎知識,但不知道我需要做什麼自動完成?

任何幫助或資源將將有助於

+2

您所需要的資源就在這裏。搜索[jquery自動完成](http://stackoverflow.com/search?q=jquery+autocomplete),你會發現。例如[這裏](http://stackoverflow.com/questions/419229/where-can-i-find-a-list-of-jquery-autocomplete-options-such-as-mustmatch-highlig) – mplungjan 2011-04-13 14:20:55

+0

儘可能我可以看到多數民衆贊成只是打倒一個菜單,你可以選擇我想要它來更新頁面,因爲我鍵入有點像谷歌的劑量 – 2011-04-13 14:25:42

+0

所以它不是自動完成,你實際上有一個問題..? – Jaymz 2011-04-13 14:26:40

回答

0

這裏是jQuery用戶界面自動完成文件:

http://jqueryui.com/autocomplete/

這裏是它應該如何實現一個例子:

var AutoCompleteOptions = { source: function(request, response) { 
    $.ajax({ 
     url: 'your URL here', 
     dataType: "json", 
     data: { 
      itemToSearch: request.term // could be any data you are passing in for search 
     }, 
     success: function(data) { 
      // do something where search values are returned 
     },         
    }); 
    }, 
    select: $.proxy(function(event, ui){ 
     // what you want to do with that information 
     // using a proxy to preserve the reference to 'this' 
     return false; // prevent the default response (typically inserting the selected value into the textbox the dropdown is being displayed from. 
    },this), 
    open: function(event, ui) { 
     // things to do when the dropdown is rendered 
     return false; // prevent default autocomplete open action 
    }, 
    focus: function(event, ui) { 
     // what to do when an the user hovers over an item in the drop down 
     return false; // prevent default autocomplete open action 
    }, 
    minLength:0 // be sure to set this if you want to be able to trigger the search event manually and have it display results 
    }; 

var Input = $("input"); 

Input.autocomplete(this.AutoCompleteOptions) 
0

你可以使用jQuery自動完成,包括庫和依賴文件,按照它應該出現的順序 here is autocomplete

PHP代碼

public function cities() { 

    $term = $_GET['term']; 
    $cities = array("one","two","three");// contains value fetched from DB 
    $filtered = array(); 
    foreach ($cities as $city) { 
     if (stripos($city, $term) !== false) { 
     array_push($filtered, $city); 
     } 
    } 
    echo json_encode($filtered); 
    exit; 
    } 

jQuery代碼

<script> 
    $(function() { 
    function log(message) { 
     $("<div>").text(message).prependTo("#log"); 
     $("#log").scrollTop(0); 
    } 

    $("#textboxid").autocomplete({ 
     source: "cities", 
     minLength: 2, 
     select: function(event, ui) { 
     log(ui.item ? 
      "Selected: " + ui.item.value + " aka " + ui.item.id : 
      "Nothing selected, input was " + this.value); 
     } 
    }); 
    }); 
</script>