オートコンプリートが正しく表示されない

Question

jQueryオートコンプリートに問題があります。

それはこのようになります： Autocomplete error

私のコードは次のとおりです。

<div> 
    @using (Ajax.BeginForm("Vyhledej", new AjaxOptions() { UpdateTargetId = "dynamicContent", InsertionMode = InsertionMode.Replace })) 
    { 
     <div class="form-group" role="group" aria-label="Basic example"> 
      <input type="text" style="width:350px; margin-right:4px; " class="form-control pull-left" placeholder="Zadej značku" id="searchBox" name="shoda"> 
      <button type="submit" class="btn-sm btn-default pull-left">Vyhledat</button> 
     </div> 
</div> 

とJavaスクリプト：

> <script type="text/javascript"> 
>  $(function() { 
>   $("#searchBox").autocomplete({ 
>    source: function(request, response) { 
>     $.ajax({ 
>      url: "@Url.Action("VyhledejKolobezky", "Kolobezky")", 
>      dataType: "json", 
>      data: { 
>       query: request.term 
>      }, 
>      success: function(data) { 
>       response(data); 
>      } 
>     }); 
>    }, 
>    minLength: 2 
>  }); 
>  }); </script> 

誰もがアイデアを持っていますか？ありがとう。

Answer 1

あなたはjQuery UIオートコンプリートCSSスタイルシートを含めていません。もちろんの

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
       "~/Content/themes/base/jquery.ui.autocomplete.css")); 

また、あなたのstylebundleの 一環として、あなたの他のスタイルシートを含める必要があります。

あなたのバンドルには、次のようになります。

また、あなたのStyleBundleでjQueryのUIスタイルシートの残りの部分を含めたい場合は、参照のために、この

@Styles.Render("~/Content/themes/base/css") 

のようにそれを追加します。

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
       "~/Content/themes/base/jquery.ui.core.css", 
       "~/Content/themes/base/jquery.ui.resizable.css", 
       "~/Content/themes/base/jquery.ui.selectable.css", 
       "~/Content/themes/base/jquery.ui.accordion.css", 
       "~/Content/themes/base/jquery.ui.autocomplete.css", 
       "~/Content/themes/base/jquery.ui.button.css", 
       "~/Content/themes/base/jquery.ui.dialog.css", 
       "~/Content/themes/base/jquery.ui.slider.css", 
       "~/Content/themes/base/jquery.ui.tabs.css", 
       "~/Content/themes/base/jquery.ui.datepicker.css", 
       "~/Content/themes/base/jquery.ui.progressbar.css", 
       "~/Content/themes/base/jquery.ui.theme.css"));