MVC - Bootstrap自動完成Typeahead

我想創建自動完成在我的MVC站點上的文本框與引導typeahead，但它不工作。MVC - Bootstrap自動完成Typeahead

@Html.EditorFor(model => model.Address.Name) 

@Html.ValidationMessageFor(model => model.Address.Name) 


// AUTOCOMLETE 
     $("#Address_Name").typeahead({ 
      source: function (request, response) { 
       $.ajax({ 
        url: "/Home/Places", 
        type: "POST", 
        dataType: "json", 
        data: { term: request }, 
        success: function (data) { 
         response($.map(data, function (item) { 
          return { label: item.Name + ' - ' + item.Address, value: item.Name }; 
         })) 

        } 
       }) 
      }, 
      messages: { 
       noResults: "", results: "" 
      } 
     });

在控制器：

// AUTOCOMPLETE - Places 
    public ActionResult Places(string term) 
    { 
     var result = (from r in unitOfWork.AddressRepository.Get() 
         where r.Name.ToLower().Contains(term.ToLower()) 
         select new { r.Name, Address = r.Street }).Distinct(); 

     return Json(result, JsonRequestBehavior.AllowGet); 
    }

在，如果我把一個斷點我在01長期是我寫的文本框，結果中包含所有找到的元素見Controller。

當我打印的 '成功' 部分中的 '數據'，該消息是：

[object Object] [object Object] [object Object] [object Object]

來源

2014-05-14 Gabor85

嘗試'console.log'您的數據 –

在控制檯中，我可以展開對象，並看到對象具有名稱和地址值我。我看到一個錯誤現在也在引導-typeahead.js，在這裏： – Gabor85

匹配：功能（項目）{ 警報（項目）回〜item.toLowerCase（）的indexOf（this.query.toLowerCase（。）） – Gabor85

可以在自舉創建簡單的HTML5自動完成這樣

HTML

<label class="label">Input with autocomlete</label> 
     <label class="input"> 
         <input type="text" list="list"> 
         <datalist id="list"> 
          <option value="Alexandra"></option> 
          <option value="Alice"></option> 
          <option value="Anastasia"></option> 
          <option value="Avelina"></option> 
         </datalist> 
     </label>

來源

2014-11-04 12:52:47

MVC - Bootstrap自動完成Typeahead

回答

相關問題