我正在使用jquery和ajax构建一个自动完成的文本字段,就像谷歌搜索栏一样。ajax调用本应在keyup上启动,但它不起作用。请注意,当我在php文件中手动输入变量时,它工作正常。因此,问题一定来自我的ajax"调用",但我无法弄清楚。希望有人能帮忙。提前感谢您的回复。干杯马克。
我的HTML:
<input id="recherche" type='text' placeholder="je recherche">
<div id="resultat"></div>
我的JS:
$('#recherche').keyup(function() {
var recherche = $(this).val();
var ajaxData = "recherche=" + recherche;
$.ajax({
type: "POST",
url: "php/reherche.php",
data: ajaxData,
success: function(retour) { // si l'appel a bien fonctionné
$('#resultat').html(retour);
}
});
});
我的CSS:
#resultat{
width:300px;
height:300px;
border:1px solid blue;}
我的PHP:
<?php
header('Content-Type: text/html; charset=utf-8');
require("connect.inc.php");
mysql_set_charset('utf8');
$recherche = mysql_real_escape_string($_POST['recherche']);
$result = mysql_query("SELECT LOC_VKUP FROM T_LOC WHERE LOC_VKUP LIKE '%$recherche%'");
while($row=mysql_fetch_assoc($result)){
echo '<div id="result">'.$row['LOC_VKUP'].'</div>';
}
?>
对于您想要完成的任务,我会考虑使用jQuery自动完成函数,而不是keyup。更多信息请点击此处http://jqueryui.com/demos/autocomplete/。这是直接构建到jQuery中的,不需要任何插件。
希望这能有所帮助!