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

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

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

已经包含了typeahead.js

为此，我编写了以下代码，但它对我来说不起作用。我的逻辑如下：

/*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
  $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;
  }
?>

当用户开始键入匹配的数据时，元素将动态生成并自动填充到文本字段下方。所以，如果我检查文本字段中包含的值是否存在于匹配的数据元素数组中，我会考虑文本字段的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
  $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;
  }
?>

必要的PHP代码如下所示：

/*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
  $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;
  }
?>

一个问题是.blur函数在.keyup中，这意味着每次按下一个键时都要添加一个新的侦听器。类似地，每次都要绑定Typeahead.js插件。您甚至可能不需要.keyup函数，并且您只需要在确定用户输入完更改事件后进行验证。下面是一个例子：

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

我会在每个按键上检查输入，并在后端检查当前输入是否与通配符%[input]..匹配。。如果返回成功，则显示列表，否则从输入中删除1个字符。。