0

ウェブサイトに jquery- 1.9.1.min.js 、PHP、MySQL などを使用しています。Bootstrap の typeahed プラグインを使用して、テキスト フィールドの自動入力機能を実現しています。ユーザーがテキスト フィールドへの入力を開始すると、バックエンドで、AJAX、PHP、および MySQL を介して必要な一致するデータ要素をフェッチします。

ここまでは、すべてうまくいっています。しかし、新たな要件が 1 つあります。自動入力されたリストに表示されるデータ項目以外のデータをユーザーが入力できるようにしたくありません。つまり、一致する自動入力リストからのみデータ要素を選択するようにユーザーを制限したいと考えています。自動入力されたデータ項目リストに存在するエントリ以外のデータを入力できないようにする必要があります。

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