設置輸入字段的值而不刷新頁面

我正在嘗試使用AJAX自動完成用戶文本。現在，我得到AJAX將自動完成功能所需的結果返回給用戶輸入的'suggestions'div。然而，我試圖完成的是從輸入字段（「prod-name」）出來的下拉式選項，其中用戶可以簡單地點擊他們的首選建議並使其成爲輸入的「值」（類似谷歌如何輸入搜索建議，但簡化版）。設置輸入字段的值而不刷新頁面

我的標記SOF遠：

<script type="text/javascript"> 
    function search(searchword) { 
     $('#suggestion').load('invoice-get-data.php?searchword=' + searchword); 
    } 
</script> 
</head> 
<body> 

<div class="prod-name"> 
    <input onKeyPress="search(this.value)" type="text" id="prod-name"/> 
    <div id="suggestion"></div> 
</div> 
</body>

我的AJAX代碼到目前爲止（發票拿到-data.php代碼段）

$searchword = $_GET['searchword']; 

    $results = mysql_query("SELECT * FROM products WHERE prod_name LIKE '".$searchword."%'") or die(mysql_error()); 

    while($row = mysql_fetch_array($results)){ 
     echo $row['prod-name'] . '<br>'; 
    }

來源

2012-12-05 AnchovyLegend

請不要使用'mysql_ *'函數編寫新代碼。他們不再維護，社區已經開始[棄用程序]（http://goo.gl/KJveJ）。請參閱* [紅盒子]（http://goo.gl/GPmFd）*？相反，您應該瞭解[準備好的語句]（http://goo.gl/vn8zQ）並使用[PDO]（http://php.net/pdo）或[MySQLi]（http://php.net/ mysqli的）。如果你不能決定哪些，[這篇文章]（http://goo.gl/3gqF9）會幫助你。如果你選擇PDO，[這裏是很好的教程]（http://goo.gl/vFWnC）。就目前而言，您的代碼已經開放給SQL注入。 –

感謝您的回覆。我會記住這一點。但是，我正在使用測試服務器，SQL注入不應該阻止我成功運行腳本。 – AnchovyLegend

jQuery用戶界面提供自動完成這樣的一個小部件：http://jqueryui.com/autocomplete/。

JavaScript端將是：

<script> 
$(function() { 
    $("#prod-name").autocomplete({ 
     source: "invoice-get-data.php", 
     minLength: 2, 
     select: function(event, ui) { 
      alert("Product #" + ui.item.id + " selected"); 
      return true; 
     } 
    } 
    }); 
}); 
</script>

而PHP端將是：

$searchword = $_GET['term']; 

$results = mysql_query("SELECT * FROM products WHERE prod_name LIKE '".$searchword."%'") or die(mysql_error()); 

$data = array(); 
while($row = mysql_fetch_array($results)){ 
    $data[]  = array(
     "id"  => $row['id'], 
     "value"  => $row['prod-name'], 
     "label"  => $row['prod-name'] 
    ); 
} 

echo json_encode($data);

來源

2012-12-05 01:16:33 tmuguet

我編輯了PHP代碼，因爲自動完成使用'term' – tmuguet

感謝您的回覆！我很感激。我不明白我如何收集在JavaScript函數中的PHP數組數據來設置jquery自動完成代碼中的源代碼：到$ data數組中的值？ ...我正嘗試使用您所包含的手動鏈接中的方法，將「源」值設置爲數組obj。 – AnchovyLegend

在'select'事件中，對象ui.item包含$ data數組的值（id，value，label或您在$ data中添加的任何索引） – tmuguet

設置輸入字段的值而不刷新頁面

回答

相關問題