jquery ui自动完成冲突与基金会安装与nuget

我用nuget安装基础和jquery ui（安装jquery）。我有一个我正在开发的MVC 5网站。jquery ui自动完成冲突与基金会安装与nuget

在我添加基础之前，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用户界面和基础，为autocomplet控制的目的共同努力。是否有可能告诉基金会停止工作一段时间，或让它不影响自动完成控件的样式。

确切的代码我已经是...

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

来源

2014-11-06 Kevin Donde

为什么有人投下这个问题，甚至没有告诉海报为什么？ – 2014-11-21 10:08:16