大型 ASP MVC @Html.DropDownListFor 在 Firefox 中不起作用

Question

我正在为我的网站上的城市使用 ASP MVC 下拉列表

 @Html.DropDownListFor(m => m.CityId, ViewBag.CityDataBag as SelectList, new { id = "citydropdown", style = "height:33px;font-size: small", @class = "ui fluid search dropdown" })

当用户试图从 Firefox 浏览器的下拉菜单中选择城市时。组合框不工作页面只是没有响应。

1. 在我的 Windows 8 和 Firefox 最新版本上一切正常..

2. 当我加载少量城市下拉作品并且页面不中断时..

3. 首次加载时 ViewBag 包含大约 3000 多个城市项目。

4. 当您单击时发生绑定工作问题

无法弄清楚为什么有些用户在使用 firefox 浏览器时遇到问题 不要。

有什么想法吗？

Answer 1

3000 是很多数据，我要做的就是将我的 viewbag 传递给视图，将其序列化为 json 对象（它将是 key value pair 的数组，其中 key 是城市名称，value 是城市 id） ，并使用filter 即时搜索，我会使用dataList，当用户从显示的选项中选择国家时，我会使用隐藏字段来保留城市的ID。 这是实现它的方法

<input type="text" id="mytextbox" list="citiesDataList" placeholder="e.g. datalist">
<input type="hidden" id="CityId" name="CityId" />
<datalist id="citiesDataList"></datalist>

在你的 js 中

// here we have json object of the list of cities , serialized 
var jsonOptions = @Html.Raw(Json.Encode(ViewBag.CityDataBag));
// on change listener, filter the list, update the datalist according to the filtered list      
$("#mytextbox").on("change", function(){
// if the length is more than to reduce the result only 
if(this.value.length > 1){
// empty datalist 
$("#citiesDataList").html("");
//filter cities based on user input 
     var cities = jsonOptions.filter(function(city){
      // return cities that the name of it contains the value of the text box
      return city.Key.indexOf(this.value) > -1;
});
// if only one result, we assume user already selected the city he wants
if(cities.length === 1)
{
// so we pass the id that matches the filter, get the first result from filter function, then pass its id to the hidden field.
$("#CityId").val(cities[0].Value);
}
// if more than one, update datalist accordingly 
else
{
//loop through the result, all cities that contains the characters inserted
cities.forEach(function(city) {
            // Create a new <option> element.
            var option = document.createElement('option');
            // Set the value using the city in the JSON array, city is an object, I assume Name field is the name of the city
            option.value = city.Key;
            // Add the <option> element to the citiesDataList.
            $("#citiesDataList").append(option);
          });
//end of else
}
//end of value.length > 1
}
//end of the listener 
});

请注意，如果有不同 id 的重复城市名称，这将无法按预期工作，这是期望城市名称是唯一的。