如何避免不建議DataList控件

Question

問題是，我不希望用戶把不是由datalist.For example.my 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> 

Answer 1

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

Answer 2

點擊搜索按鈕時，您可以運行一個自定義的驗證功能，確保搜索值與可用值之一對應在餐館的名單。

工作實例：

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