我正在为我的网站使用jquery-1.9.1.min.js、PHP、MySQL 等。我正在使用Bootstrap 的 typeahed 插件来实现文本字段上的自动填充功能。AS 用户开始在文本字段中输入内容,在后端我通过 AJAX、PHP 和 MySQL 获取必要的匹配数据元素。
直到这里一切对我来说都很好。但是有一个新的要求。除了出现在自动填充列表中的数据项之外,我不想让用户输入数据。换句话说,我想限制用户仅从匹配的自动填充列表中选择数据元素。除了自动填充的数据项列表中存在的条目之外,他/她不应该能够输入数据。
typeahead.js已经包含在内。
为此,我编写了以下代码,但它对我不起作用。我的逻辑如下:
当用户开始输入匹配数据时,元素会动态生成并自动填充到文本字段下方。因此,如果我检查文本字段中包含的值是否存在于匹配的数据元素数组中,我会考虑文本字段的“onBlur”事件。如果不是那么只是空白文本字段,提醒用户仅从匹配的自动填充项目列表中选择值。
可能是我的逻辑错了。如果有人能以更聪明的方式解决我的问题,或者仅仅通过修改我编写的代码,那将对我有很大帮助。
我的 HTML 和 jQuery 代码如下:
/*Here goes the HTML code*/
<form action="products.php" id="manage_product" name ="manage_product" role="form" class="form-horizontal col-md-12" method="post">
<input type="hidden" name="admin_url" id="admin_url" value="http://localhost/xyz/pqr">
<input type="text" class="form-control dynamic_cat" size="20" autocomplete="on" id="product_type_id" name="product_type_id" value="">
</form>
/*Here goes the jQuery code*/
$('.dynamic_cat').keyup(function() {
$(".dynamic_cat").typeahead({
source: function(query, process) {
var textVal = $(".dynamic_cat").val();
var admin_url = $("#admin_url").val();
$.ajax({
url: admin_url+'modules/product_types/product_types.php',
type: 'POST',
data: 'op=get_all_categories',
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
//console.log(textVal);
}
});
}
}).blur(function(data) {
if ($.inArray($(this).val(), data) == -1) {
$('.dynamic_cat').val('');
alert("Please select the value only from list");
}
});
});
必要的PHP代码如下:
<?php
$objProductType = new ProductType();
switch( $op ) {
case "get_all_categories":
$ret = $objProductType->GetAllProductTypeNames();
if(!$ret) {
$error_msg = $objProductType->GetAllErrors();
list($data) = prepare_response($request);
$smarty->assign('data', $data);
} else {
$grid_data = $objProductType->GetResponse();
$category_name = '';
for($i=0;$i<count($grid_data);$i++) {
$category_name[] = $grid_data[$i]['category_name'];
}
echo json_encode($category_name);
die;
}
break;
}
?>