Question

我有一个MVC网站，它有一个带自动完成功能的搜索框，现在我使用bootstrap更改了布局。但是现在自动完成功能已经不再正确显示了。看到图片没有正确显示建议。

example

自动完成通过文本。我使用bootstrap之前没事。

我正在使用SQL服务器来获取数据，这是js文件（我不擅长ajax，我从我遵循的教程中接受了它）

$(function () {

var ajaxFormSubmit = function () {


    var $form = $(this);

    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-aptitude-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        $newHtml.show("slide", 200);
    });

    return false;
};

var submitAutocompleteForm = function (event, ui) {

    var $input = $(this);
    $input.val(ui.item.label);

    var $form = $input.parents("form:first");
    $form.submit();
};

var createAutocomplete = function () {
    var $input = $(this);

    var options = {
        source: $input.attr("data-aptitude-autocomplete"),
        select: submitAutocompleteForm
    };

    $input.autocomplete(options);
};

$("form[data-aptituder-ajax='true']").submit(ajaxFormSubmit);
$("input[data-aptitude-autocomplete]").each(createAutocomplete);


});

这是我视图中的表单

<form method="get" action="@Url.Action("Index")"
  data-aptitude-ajax="true" data-aptitude-target="#testList">
<input type="search" name="searchTerm" data-aptitude-autocomplete="@Url.Action("Autocomplete")" />
<input type="submit" value=Search />

这是视图控制器的一部分

    public ActionResult Autocomplete(string term)
    {

        var model = db.tests
           .Where(r => term == null || r.name.Contains(term))
            .Select(r => new
            {
                label = r.name
            });

        return Json(model, JsonRequestBehavior.AllowGet);
    }


    //
    // GET: /Test/
    public ActionResult Index(string searchTerm = null)
    {
        var model = db.tests
           .Where(r => searchTerm == null || r.name.StartsWith(searchTerm));

       if (Request.IsAjaxRequest())
        {
            return PartialView("_Test", model);
        }

        return View(model);
    }

我是ajax和bootstrap 3的新手。我从我遵循的教程中获得了搜索功能和自动完成功能。有人知道如何解决这个问题，因为它工作正常吗？

提前致谢！

Answer 1

我意识到这个问题比较陈旧，但是我不确定你是否找到了解决方案并且还没有发布它？

无论如何 - 我刚遇到这个问题（使用MVC 5，BootStrap 3和typeahead.js 0.10.2）。

我找到了这个网站，哪一半解决了我的/我们的＃34;问题Typeahead CSS。

我刚刚从网站上删除了以下样式，并在我的局部视图中使用了它们（搜索框所在的位置），该框现在正常工作，看起来像是typeahead.js示例网站上的所有演示< / p>

.tt-dropdown-menu {
    min-width: 160px;
    margin-top: 2px;
    padding: 5px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.tt-suggestion {
    display: block;
    padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

.tt-suggestion.tt-is-under-cursor a {
    color: #fff;
}

.tt-suggestion p {
    margin: 0;
}

现在唯一的问题是，建议文字（来自预先输入）和输入中的实际文字没有对齐，看起来像是在太多啤酒后查看它了！

MVC Bootstrap：自动完成功能无法正常显示

1 个答案: