在輸入字段中輸入字符時自動建議？

系統（位置）中有一個龐大的城市和其他東西數據庫，等待作爲下拉列表，div（s）或什麼東西來壓縮大量的選擇 - 在想要的位置的每個字符之後立即被輸入到該輸入字段中。在輸入字段中輸入字符時自動建議？

它與我們提交問題時的標籤類似。因此，如果我們輸入「L」倫敦和拉齊奧即將上市，在「La」之後 - 只有拉齊奧將保持可用狀態。

任何步驟或很酷的例子如何做到這一點？試圖找到一些很酷的東西，但沒有運氣。我使用jQuery。

2011-12-14 Xfile

我認爲有幾個jQuery自動完成插件。 – Pointy 2011-12-14 19:58:13

您可能想要[jQuery UI自動完成]（http://jqueryui.com/demos/autocomplete/）。 – 2012-01-27 18:09:42

這可能不是最好的sollution但它的作品在我的網站。此腳本實現街道名稱自動完成，取決於用戶之前輸入的州和城市。這段代碼監聽事件「keyup」。如果用戶輸入了多個字母，腳本將啓動一個js請求，其中.php腳本會分析我們發送的參數，並進行SQL查詢和回覆。如果用戶足夠幸運並且他嘗試查找街道名稱的一些建議，我們向他顯示ID爲hintsTable的div。我們還爲每個自動完成選項創建事件偵聽器（單擊），其中我們用自動完成選項替換輸入字段的值並隱藏下拉列表。我希望它有幫助。

$("#street input").keyup(function(){             //street enter 
     var input = $('#street input').val(); //we get what user has already entered 
     var code = $('#mregionSelect').val(); //city id 
     if(input.length > 1) 
     { 
      $.ajax({ 
       type  : "POST", 
       url   : "components/com_areas/ajaxhelper.php", 
       data  : "input=" + encodeURIComponent(input) + "&code=" + code, 
       cache  : false, 
      }).done(function(msg){ 
       if(msg.length > 0) 
       { 
        $('#hintsTable').html(msg); //fill drop-down list with auto complete options 
        $('#hints').css('display', 'block'); //show the list 
        $('#hintsTable tr').click(function(){ 
         var hint = this.cells[0].innerHTML; 
         $('#street input').val(hint); 
         $('#hints').css("display", "none"); 
        }) 
       } 
       else 
       { 
        $('#hintsTable').html(''); 
        $('#hints').css('display', 'none'); 
        //$('#findButton').css('display', 'none'); 
       } 
      }) 
     } 
     else 
     { 
      $('#hintsTable').html(''); 
      $('#hints').css('display', 'none'); 
      //$('#findButton').css('display', 'none'); 
     }    
    })

來源

2012-01-27 18:01:51

你可以在

<input name="txtSearch" type="text" onkeydown="jscriptfunc();" autocomplete="off"/>  
<div class="autoDiv"></div> (could use CSS to format the div accordingly)

現在jscriptfunc創建一個div一個文本框，當用戶按下某個鍵可編碼調用與AJAX的幫助PHP腳本。這個PHP腳本正在接受到目前爲止輸入的任何用戶，並執行簡單的模式匹配搜索，例如，

Select * from table where field like '$input%' limit 5;

然後，我們只是把結果和它送入DIV

來源

2011-12-14 20:22:46

在輸入字段中輸入字符時自動建議？

回答

相關問題