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

回答

相关问题