Question

我正在为我的网站使用 jquery-1.9.1.min.js，PHP，MySQL等。我使用 Bootstrap的打字插件来实现文本字段的自动填充功能。 AS用户开始在文本字段中输入内容，在后端我通过AJAX，PHP和MySQL获取必要的匹配数据元素。

直到这里一切都对我很好。但是有一个新要求。我不想让用户输入除自动填充列表中显示的数据项以外的数据。换句话说，我想限制用户仅从匹配的自动填充列表中选择数据元素。他/她不应该输入除自动填充数据项列表中的条目以外的数据。

typeahead.js 已包含在内。

为此我写了下面的代码，但它对我没用。我的逻辑如下：

当用户开始输入匹配数据时，元素会动态生成并自动填充在文本字段下方。所以，我认为＆＃34; onBlur＆＃34;如果我检查文本字段中包含的值是否存在于匹配的数据元素数组中，则为文本字段的事件。如果不是，则只删空文本字段，提醒用户仅从匹配的自动填充的项目列表中选择值。

可能是我的逻辑错了。如果有人能够以更智能的方式解决我的问题，或者只是通过修改我编写的代码，那将对我有很大的帮助。

我的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;
  }
?>

Answer 1

一个问题是.blur()函数在.keyup()的内，这意味着每次按下一个键时你都会添加一个新的监听器。同样，您每次都会重新绑定Typeahead.js插件。您可能甚至不需要.keyup()功能 - typeahead.js will listen for keystrokes itself，只需确认用户输入完成后（例如，更改） 事件）。这是一个例子：

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验证视为对用户的礼貌，因此他/她可以获得更快的反馈。

限制用户仅在jQuery中从自动填充列表中选择值的问题是什么（即用户不能输入新条目）？

1 个答案: