Question

问题是我不希望用户放置一个不是datalist建议的搜索字符串。例如。我的datalist建议用户使用以下内容：

Nahid的Kichen

意大利菜肴

ABC餐厅

在这种情况下，用户可以输入除此3选项之外的值，例如

中文

我不是用户能够放置他想要的东西，我希望用户必须在建议的3个选项之间进行选择。

如果您需要任何澄清，请敲我。谢谢，

摘要代码如下：

<input type="text" name="search" list="categoryname" autocomplete="off" id="pcategory" style="width:200px;height:40px; border:1px thick;font-weight:bold" placeholder="Location or Restaurant" required/>
 <datalist id="categoryname">
    <?php while($row = $qry->fetch_assoc()) { ?>
        <option   value="<?php echo  $row['acc_id']."=".$row['res_name']." , ".$row['res_city'];?>"><?php echo $row['res_name']." , ".$row['res_city']." , ".$row['res_country']; ?></option>
    <?php } ?>
</datalist>

Answer 1

单击搜索按钮时，您可以运行自定义验证功能，以确保搜索值与餐馆列表中的某个可用值相对应。

工作示例：

// Create list of valid restaurant names
var restaurants = document.getElementsByTagName('option');
var restaurantList = [];

for (var i = 0; i < restaurants.length; i++) {
    restaurantList[i] = restaurants[i].getAttribute('value');
}



var searchBox = document.getElementById('pcategory');
var searchSubmit = document.querySelector('[type="submit"]');

function checkSearch() {
    if (restaurantList.indexOf(searchBox.value) === -1) {
        window.alert(searchBox.value + ' is not a valid selection - please choose from the list');
        searchBox.value = '';
    }
}

searchSubmit.addEventListener('click', checkSearch, false);

input {
width: 200px;
height: 40px;
font-weight: bold;
border: 1px thick rgb(127,127,127);
}

<form>
<input type="text" name="search" list="categoryname" autocomplete="off" id="pcategory" placeholder="Location or Restaurant" required/>
<datalist id="categoryname">
<option value="Nahid's Kitchen">Nahid's Kitchen</option>
<option value="Italian Dishes">Italian Dishes</option>
<option value="ABC Restaurant">ABC Restaurant</option>
</datalist>
<input type="submit" value="Search" />
</form>

Answer 2

我认为select标签就是你想要的。如果您不想要任何其他用户输入，请尝试使用它：

<select name="search" id="pcategory" style="width:200px;height:40px; border:1px thick;font-weight:bold" required>
    <option value="">Location or Restaurant</option>
    <?php while($row = $qry->fetch_assoc()) { ?>
        <option value="<?php echo  $row['acc_id']; ?>"><?php echo $row['res_name']." , ".$row['res_city']." , ".$row['res_country']; ?></option>
    <?php } ?>
</select>

如何避免提交不在建议的数据列表中的文本

2 个答案: