Javascript 要求输入在数据列表中

我有一个datalist类型的表单输入，在这个列表中大约有5000个选项，因为有大量的选项，选择表单是不实用的，因为您可以输入，它建议您使用datalist

 <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>

产品代码

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

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

---

jsFIDLE:

如果您愿意使用jQueryUI的

自动完成

，这将起作用：

  <?php // tweak the below to use your data
        $arr = array( array('Name' => 'one'), array('Name' => 'two'), array('Name' => 'three') );
        $optsArr = array();
        foreach ($arr as $a) { 
          array_push( $optsArr , '"'.htmlentities( $a["Name"] ).'"' ); ;
        }
        $options = implode(",", $optsArr)
  ?>

 var availableTags = [<?php  echo $options ?>];
 $(function() {
     $( "#ItemSelect" ).autocomplete({
        source: availableTags,
        change: function (event, ui) {
            if(!ui.item){
                //http://api.jqueryui.com/autocomplete/#event-change -
                // ui.item property is null if the input was not found in the list
                $("#ItemSelect").val("");
            }

        }
     });
 });

---

提交时获取与数据字段值最接近的匹配项或提醒用户该字段不正确我无法获取最接近的匹配项，它必须在列表中，并且这些是产品代码，因此可以有多个相似的产品代码，我将如何做？非常感谢这正是我需要的
  <?php // tweak the below to use your data
        $arr = array( array('Name' => 'one'), array('Name' => 'two'), array('Name' => 'three') );
        $optsArr = array();
        foreach ($arr as $a) { 
          array_push( $optsArr , '"'.htmlentities( $a["Name"] ).'"' ); ;
        }
        $options = implode(",", $optsArr)
  ?>

 var availableTags = [<?php  echo $options ?>];
 $(function() {
     $( "#ItemSelect" ).autocomplete({
        source: availableTags,
        change: function (event, ui) {
            if(!ui.item){
                //http://api.jqueryui.com/autocomplete/#event-change -
                // ui.item property is null if the input was not found in the list
                $("#ItemSelect").val("");
            }

        }
     });
 });