文本字段自動完成（在字段中），因爲你鍵入

我想開發一個功能，根據數據庫中已有的內容提供建議，或允許您輸入自己的價值。這是讓用戶知道系統中已有內容的一種方式，以防他們想要對類似內容進行分類。所以我已經做到了。文本字段自動完成（在字段中），因爲你鍵入

問題是，下面的代碼提供了一個下拉菜單，我無法弄清楚在google中搜索哪些單詞以獲得關於內聯完成的教程，您可以在其中輸入並填充該單詞的其餘部分當你在盒子中輸入時，不會下拉。

任何人有任何建議嗎？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Auto Complete Input box</title> 
    <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" /> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="jquery.autocomplete.js"></script> 
    <script> 
$(document).ready 
(function() 
{ 
    $("#tag").keyup 
    (function() 
     { 
      var tag= $(this).val(); 
      if(tag!='') 
      { 
       $.ajax(
       { 
        type: "GET", 
        url: "autocomplete.php", 
        data: "q=" + tag, 
        cache: true, 
        success: function(result) 
        { 
         $("#tag").val(result); 
        } 
       } 
       ); 
      } 
      return false; 
     } 
    ); 
} 
); 
</script> 
    </head> 
    <body> 
    <form method="post" action="input.php"> 
    Please put something in: <input name="tag" type="text" id="tag" size="20"> 
    <input type="submit" value="Submit"> 
    </form> 

    <?php 
    $mysqli=mysqli_connect('localhost','XXXXXXXXXX','XXXXXXXX','XXXXXXXXXXX') or die("Database Error"); 
    $sql="SELECT auto_complete_suggestions FROM auto_complete"; 
    $result = mysqli_query($mysqli,$sql) or die(mysqli_error()); 
    ?> 
    </body> 
    </html>

它鏈接到這一塊

<?php 
    $q=$_GET['q']; 
    $my_data=mysql_real_escape_string($q); 
    $mysqli=mysqli_connect('localhost','XXXXXXXXX','XXXXXXXXXX','XXXXXXXXXX') or die("Database Error"); 
    $sql = "SELECT DISTINCT auto_complete_suggestions FROM auto_complete WHERE auto_complete_suggestions LIKE '%$my_data%' 
ORDER BY CASE WHEN auto_complete_suggestions = '$mydata' THEN 0 
       WHEN auto_complete_suggestions LIKE '$mydata%' THEN 1 
       WHEN auto_complete_suggestions LIKE '%$mydata%' THEN 2 
       WHEN auto_complete_suggestions LIKE '%$mydata' THEN 3 
       ELSE 4 
      END, auto_complete_suggestions LIMIT 0,1"; 
    $result = mysqli_query($mysqli,$sql) or die(mysqli_error()); 

    if($result) 
    { 
     while($row=mysqli_fetch_array($result)) 
     { 
     echo $row['auto_complete_suggestions']."\n"; 
     } 
    } 
    ?>

我假定這將是一個AJAX或JQuery的任務，但我沒有找到任何例子，讓我指出了正確的方向任何幫助

會不勝感激。

爲了簡潔起見：在我輸入文本時，我正在構建一個完成文本的功能，並直接在文本框中提供建議。

謝謝！

來源

2014-10-29 new2programming

請點擊此鏈接：http://www.9lessons.info/2009/06/autosuggestion-with-jquery-ajax-and-php.html對於基本系統 – 2014-10-29 13:15:35

不幸的是，這正是我上面的腳本所做的。我正在尋找它將結果直接放入文本框 – new2programming 2014-10-29 13:16:55

作出更新的問題。 – new2programming 2014-10-30 15:15:24

如果我理解你正確，你會想從數據庫放置在「標籤」文本框中的建議。如果是這種情況，你可以做這樣的事：

$(document).ready(function(){ 
$("#tag").keyup(function() 
{ 
    var tag= $(this).val(); 
    if(tag!='') 
    { 
     $.ajax({ 
     type: "GET", 
     url: "autocomplete.php", 
     data: "q=" + tag, 
     cache: false, 
     success: function(result) 
     { 
      $("#tag").val(result); 
     } 
     }); 
    }return false; 
}); 
});

雖然你將不得不限制你的結果到一個記錄。

在你autocomplete.php（我假定這就是第二個代碼段），你會怎麼做：

$sql="SELECT DISTINCT auto_complete_suggestions FROM auto_complete WHERE auto_complete_suggestions LIKE '%$my_data%' ORDER BY auto_complete_suggestions LIMIT 0,1";

這將使一個AJAX調用一旦keyup事件觸發器和使用標籤的文本框的值進行搜索。

來源

2014-10-29 14:11:50 Seunhaab

我試過了，但它幾乎看起來像是被卡在永久循環中，用戶輸入字母't'然後出現'tiger'，然後你將整個單詞留在盒子裏，當你嘗試鍵入或刪除它仍然只是提出「老虎」，因爲那是盒子裏的東西。想法？ – new2programming 2014-10-30 14:51:28

如果你輸入不同的東西，它實際上是否會創建一個新的ajax調用？（當你點擊檢查元素時，你可以在Network標籤下查看） – Seunhaab 2014-10-30 15:37:17

yup我輸入「help」，它只是用「add」替換字母，並顯示4個單獨的GET autocomplete.php？q = h autocomplete .php？q = adde autocomplete.php？q = addl autocomplete.php？q = addp 所以真的我希望它會更像當我鍵入「h」它表明「幫助」，但當時我鍵入整個「幫助」並添加一個「e」它會提示「助手」 – new2programming 2014-10-30 17:04:48

文本字段自動完成（在字段中），因爲你鍵入

回答

相關問題