0

我正在为我的网站使用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;
  }
?>
4

1 回答 1

0

一个问题是该.blur()函数在内部，.keyup()这意味着每次按下一个键时您都会添加一个新的侦听器。同样，您每次都重新绑定 Typeahead.js 插件。你可能甚至不需要这个.keyup()函数——typeahead.js 会自己监听击键，并且你只需要在你确定用户完成输入后进行验证（比如，在change事件上）。这是一个例子：

var $input = $(".dynamic_cat");

$input.typeahead({
  // ... 
}).on('change', function () {
  if ($.inArray($input.val(), data) == -1) {
    $input.val('');
    alert("Please select the value only from list");
  }
});

免责声明：在生产站点中，您希望始终在后端（在本例中为 PHP）进行验证，以确保输入有效。将 JavaScript 验证视为对用户的一种礼貌，因此他/她可以更快地获得反馈。

于 2014-08-19T01:19:50.763 回答