javascript - 要求输入在数据列表中

Question

我有一个数据列表类型的表单输入，在这个列表中大约有 5000 个选项，因为有大量的选项，所以选择表单是不实用的，因为你可以输入它，它会建议你想要的数据列表。

 <div class='form-row'>
                    <div class='col-xs-12 form-group required' style="margin-top: -2px; margin-bottom: 0px;">
                        <h2><label class='control-label' style="font-size: 20px;">Product code</label></h2>
                        <input required id="ItemSelect" list=jobs style='font-size:21px;height: 40px;'
                               class='form-control'
                               name="Code">
                        <datalist id=jobs>
                            <?php
                            foreach ($this->Products as $a) {
                                $inputValue = "  " . htmlentities($a["Code"] . " | " . $a["Name"]) . " ";
                                echo '<option>' . $inputValue;
                            }
                            ?>
                        </datalist> 
                    </div>

这就是我现在所拥有的，但是用户可以键入并提交不在列表中的内容，我不允许这样做。我怎样才能阻止这种情况发生？

Answer 1

如果字段值不正确，提醒用户

$('input[type="submit"]').on('click',function(e) {
  $datalistval= $('#ItemSelect').val();
  if ($('option[value="'+$datalistval+'"]').length == 0) //if no option is found alert the user
   {
   alert('incorect datalist value');
   e.preventDefault();
   }
});

jsfiddle:https://jsfiddle.net/ev63ghwk/