В чем проблема ограничить пользователя выбором значения из автоматически заполняемого списка только в jQuery (т.е. пользователь не должен иметь возможность вводить новую запись)?

Я использую jquery-1.9.1.min.js, PHP, MySQL и т. д. для своего веб-сайта. Я использую плагин Bootstrap typeahed для автоматического заполнения текстового поля. КАК пользователь начинает вводить текст в текстовое поле, в конце я извлекаю необходимые совпадающие элементы данных через 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;
  }
?>

php jquery ajax auto-populate bootstrap-typeahead
person PHPFan    schedule 06.08.2014    source источник
comment
Я бы пошел на проверку ввода при каждом нажатии клавиши и на бэкэнд, проверяя, есть ли у текущего ввода совпадающие результаты с подстановочными знаками %[INPUT]% .. если он возвращает успешный результат, покажите список, в противном случае удалите 1 символ из введенного ввода ..   -  person Syed Qarib    schedule 06.08.2014

Ответы (1)


arrow_upward
0
arrow_downward

Одна из проблем заключается в том, что функция .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 как о любезности по отношению к пользователю, чтобы он мог быстрее получить обратную связь.

person Don McCurdy    schedule 19.08.2014