jquery ui自动完成与使用nuget安装的基础冲突答案

【问题标题】：jquery ui autocomplete conflicts with foundation install with nugetjquery ui自动完成与使用nuget安装的基础冲突
【发布时间】：2014-11-06 03:37:59
【问题描述】：

我使用 nuget 安装 Foundation 和 jquery ui（安装 jquery）。我有一个正在开发的 MVC 5 网站。

在我添加基础之前，jquery 自动完成控件工作正常。但是，安装后该控件仍然可以正常工作，但您在其中进行选择的下拉菜单消失了。

我遇到了这个解决方案Style autocomplete with Zurb Foundation，我认为这是来自同一个人...http://ezra.keddell.co.nz/implementing-jquery-autocomplete-in-zurb-foundation-4/。它们是我在搜索中遇到的唯一解决方案。但是我不认为它对我有用，因为当你通过 nuget 安装基础时，我可以告诉它它不附带 jquery。所以他想用下面的代码修改的文件是无效的，我不知道哪些文件是正确的。我也不明白为什么这是有道理的。

<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>

我想我正在寻找一种方法来让 jquery ui 和基础一起工作以实现自动完成控件的目的。是否可以告诉 Foundation 停止工作一段时间或让它不影响自动完成控件的样式。

我拥有的确切代码是...

Layout.cshtml

<head>
<meta charset="utf-8" />

@Styles.Render("~/Content/foundation/css")
@Styles.Render("~/Content/site.css")

@RenderSection("head", required: false)
@Scripts.Render("~/bundles/modernizr")
</head>

<div id="mainWrap" class="row">
    <div class="Columns small-12 small-centered">
        @RenderBody()
    </div>
</div>


@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/foundation")
<script>
    $(document).foundation();
</script>
@*Use the Scripts section to define page specific scripts*@
@RenderSection("scripts", required: false)

index.cshtml

    <script>
    $(document).ready(function () {
        $("#Name").autocomplete({

            //  how does the request get a value?
            source: function GetRemoteData(request, response) {

                var name = $("#Name").val();

                $.ajax({
                    type: "GET", 
                    url: "/api/attendees/" + name,  
                    cache: false,
                    data: request,
                    dataType: "json", 
                    success: function (json) {
                        // call autocomplete callback method with
                        response($.map(json, function (name, val) {
                            return {
                                label: name,
                                value: val
                            };
                        }));
                    },
                    error: function (XMLHttpRequest, textStatus, e) {
                        alert("error - " + textStatus);
                        console.log("error", textStatus, errorThrown);
                    }
                }); // end $.ajax
            },
            minLength: 2,
            select: function (event, ui) {
                alert("you have selected " + ui.item.label + "Id: " + ui.item.value);
                $("#Name").val(ui.item.label);
                return false;
            }

        }); // end autocomplete

        // supposedly to help foundation and jquery ui work together.
        $('.ui-autocomplete').addClass('f-dropdown');


    }); // end ready

</script>


@using (Html.BeginForm("Submit", "Home")) { 

@*<label>Your Name:</label> <input type="text" id="Name" name="Name" value="@Html.Raw(Model.Firstname) @Html.Raw(Model.LastName)" /> <br />*@
<label>Your Name:</label>    <input type="text" id="Name" name="Name" value="" /> <br />
@Html.LabelFor( x=> x.Attending ) @Html.CheckBoxFor( x=> x.Attending ) @*<label>Attending:</label>*@  @*<input type="checkbox" id="Attending" name="Attending" />*@ <br />
@Html.LabelFor( x => x.Windermere ) @Html.CheckBoxFor( x => x.Windermere ) @*<label>Staying at the Windermere Manor:</label>*@ @*<input type="radio" id="radioYes" /> <input type="radio" id="radioNo" /> <input type="radio" id="radioMaybe" />*@ <br />
@Html.TextAreaFor( x => x.Notes )<label>Notes:</label>  @*<textarea id="AttendanceNotes" name="AttendanceNotes"> </textarea>*@ <br />

<button id="Submit" name="Sumbit">Submit</button>
}

【问题讨论】：

为什么有人不告诉发帖人为什么就投了这个问题？

标签： jquery asp.net-mvc jquery-ui zurb-foundation

【解决方案1】：

这真的很不幸，但这并不是基础和 jquery ui 之间的冲突……如果你仔细观察上面的内容，你会注意到我没有包含 jquery UI css 样式表。

【讨论】：