如何避免不建议DataList控件

问题是，我不希望用户把不是由datalist.For example.my DataList的建议搜索字符串文本提交建议用户如下：如何避免不建议DataList控件

Nahid的着呢

意大利菜

ABC餐厅

在这种情况下，用户可以把其他的值比这3选项，如

中国

我没有用户能够把他想要的东西，我想用户必须提出3个选项之间进行选择。

如果您需要任何clearification，请敲me.Thank您，下面

摘要代码给出：

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

来源

2017-03-06 Dorji loja

我觉得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>

来源

2017-03-06 10:37:49

谢谢，但抱歉知道that.But我不希望它在elect.I希望它在数据列表。 –

点击搜索按钮时，您可以运行一个自定义的验证功能，确保搜索值与可用值之一对应在餐馆的名单。

工作实例：

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

来源

2017-03-06 11:44:41 Rounin

如何避免不建议DataList控件

回答

相关问题