我写了一个自动建议文本字段。现在选择值后,我需要提醒该值。
请看图片。如果我输入Ma
然后输入Math
是我的建议之一。所以当我点击那个数学时,文本字段应该被覆盖为数学。到此为止还好。用户可以从建议中进行选择,也可以在文本字段中逐个字母地写数学。根据该值,ajax 将创建另一个下拉框。现在请告诉我,实际的事件处理函数是什么?如果我使用 keyup() 那么只有 Ma 正在打印,如果使用 change 那么它正在发生同样的事情。请让我知道正确的。
提前致谢。
更新
<script type="text/javascript">
function suggest(inputString,cat_id){
if(inputString.length == 0) {
$('#suggestions').fadeOut();
} else {
$('#issue_book_title').addClass('load');
$.post("<?php echo $base_url?>all_book_title.php?cat_id="+cat_id+"&title_string="+inputString, function(data){
if(data.length >0) {
$('#suggestions').fadeIn();
$('#suggestionsList').html(data);
$('#issue_book_title').removeClass('load');
}
});
}
}
function fill(thisValue) {
$('#issue_book_title').val(thisValue);
setTimeout("$('#suggestions').fadeOut();", 600);
}
</script>
<input type="text" name="issue_book_title" id="issue_book_title" value="" class="textbox_small" onkeyup="suggest(this.value,document.getElementById('book_cat').value);" />
<input type="hidden" name="hide_book_cat" id="hide_book_cat" value="0" />
<input type="hidden" name="hide_book_title" id="hide_book_title" value="" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="suggestionsList"> </div>
</div>
<script type="text/javascript">
$('#issue_book_title').on('change',function(event){
alert(event.target.value);
//alert("Proceed");
var book_title = $('#issue_book_title').val();
$.ajax({
type: "POST",
url : "<?php echo $base_url?>issue_book_author.php?book_title="+book_title,
success:function(res){
$('#populate_book_author').html(res);
}
});
});
</script>
在 all_book_title.php 文件中,我只是从 mysql DB 中获取数据
include('config_db_ajax.php'); //db connection file
$title = $_REQUEST['title_string'];
$cat_id = ($_REQUEST['cat_id']!= '')?$_REQUEST['cat_id']:'';
$sql = "SELECT title FROM book_details WHERE title LIKE '%".$title."%'";
if($cat_id != ''){
$sql .= " AND cat_id=".$cat_id;
}
$query = mysql_query($sql);
echo '<ul>';
while($res = mysql_fetch_array($query)){
echo '<li onClick="fill(\''.$res['title'].'\');"><input type="hidden">'.$res['title'].'</li>';
}
echo '</ul>';