选择下拉列表中不提供类型功能

Question

我有一个带有搜索选项的选择下拉列表，显示动态数据，它工作正常，但我需要再添加一个功能，如果用户键入任何内容并且在选项中不可用，那么应该允许他只是输入并提供一个输入。它应该不是这样的，如果用户的期望值不在下拉列表中，那么他也无法输入

我关注下拉列表的链接是

这是我的代码：

 <connectionStrings>
        <add name="ConnectionStringName" providerName="System.Data.SqlClient" connectionString="Data Source=tcp:[databasename].database.windows.net,1433;Initial Catalog=[databasename];Integrated Security=False;User Id=[username];Password=[password];Encrypt=True;TrustServerCertificate=False;MultipleActiveResultSets=True" />   
</connectionStrings>

任何人都可以给我任何建议， 提前谢谢。

Answer 1

您可以使用html5 datalist功能来实现此功能，

 <input name="ddlCountry" id="Select1" class="selectpicker" data-live-search-style="begins" data-live-search="true" >
<datalist id="Select1">
    <?php foreach($location as $loc): ?>
      <option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
    <?php endforeach; ?>
</datalist>

Answer 2

解决方案要求您在用户输入时捕获输入，上述解决方案的另一个问题是，使用select和options非常棘手，而是使用输入类型文本，如下面的代码所示。

以下代码需要进行一些调整。

Html和PHP

<input list="select1" name="ddlCountry" class="selectpicker" data-live-search-style="begins" data-live-search="true" /><
<datalist id="select1">
<?php foreach($location as $loc): ?>
     <option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?>
    <?php endforeach; ?>
</datalist>

每次用户输入数据时，我们都需要一种方法来捕获新条目 AJAX和Javascript

$(document).ready(function() {
  $(document).on('keyup', 'input[name="ddlCountry"]', function() {
    alert($('input[name="ddlCountry"]').val());
    $.ajax({
        url: "{PHP url}",
        method: "GET",
        data: {
          search: $('#Select1 option:selected').val()
        },
      })
      .done(function(data) {
        //assuming the data is returned as an array
        var tmp_variable = '';
        data.foreach(function(item) {
          tmp_variable = tmp_variable + '<option value="' + item + '">';
        })
        $('#select1').html(tmp_variable);
      });
  });
})