Question

所以上下文是一个带有剃刀视图的MVC 4互联网应用程序。

以下是我想要显示自动完成下拉列表的输入字段：

<td>
  <div class="editor-field">
    <input type="text" id="catSelector" />
    @*@Html.TextBoxFor(model => model.Category, new { id = "catSelector" })
        @Html.ValidationMessageFor(model => model.Category)*@
  </div>
</td>

脚本部分如下（放在我页面的底部）：

<script>

$('#catSelector').autocomplete({    source: getCategories,});


function getCategories(request, response) {

    $.ajax({
        url: '/Activity/GetCategories',
        data: { query: request.term },
        dataType: 'json',
        type: 'POST',
        success: function (data) {

            response($.map(data, function (item) {
                return {
                    label: item.Name,
                    value: item.CategoryId
                };
            }));
        }
    });

}

服务器操作（“Activity / GetCategories”）就是这个：

public JsonResult GetCategories(string query = "")
{

  var result= _dal.SelectCategories(query);

  return Json(result, JsonRequestBehavior.AllowGet);

}

基本上，类别只是名称和ID。

到目前为止，我设法让ajax调用返回json数据（用firebug检查，数据部分的一切都很好）。

当我开始输入搜索条件时，输入字段下方会显示自动完成下拉列表。

但是一旦我尝试通过检索到的值（使用键盘或使用鼠标选择值）进行导航，下拉菜单消失并且输入字段失去焦点。

我的代码可能有什么问题？

我必须补充一点，我使用Metro UI CSS 2.0（样式和js），这在几年前使用jQuery ui datepicker引起了一些麻烦。所以我试图激活所有Metro ui css脚本，但没有运气。

最后，这个问题出现在Chrome和Firefox上。

提前感谢您的建议。

Answer 1

知道了...我的解决方案中引用了两个jquery ui脚本：一个文件中包含所有文件和各个组件文件......

我的坏......

在我尝试选择价值时，下拉失去焦点

1 个答案: