“喜欢”模式下的Bootstrap Typeahead Bloodhound搜索

时间:2019-03-25 10:41:15

标签: javascript bootstrap-typeahead bloodhound

我在asp.net中使用Typeahead库

在我的aspx页面中,有一个javascript函数可在预输入源中加载产品名称:

  function CaricaProdotti() {
   var data = $("#<%=txtProductNames.ClientID%>").val();

   var jsonObj = $.parseJSON(data);
   var sourceArr = [];
   for (var i = 0; i < jsonObj.length; i++) { sourceArr.push(jsonObj[i].name); }

   var suggestions = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.whitespace, // see its meaning above
      queryTokenizer: Bloodhound.tokenizers.nonword, // see its meaning above
      local: sourceArr
   });

   var $input = $(".typeahead");
   // init Typeahead
   $input.typeahead({
      hint: true,
      highlight: true,
      minLength: 1
   },
      {
         name: 'products',
         source: suggestions,  // Bloodhound instance is passed as the source
         limit: 20
      });

   $input.bind('typeahead:select', function (ev, suggestion) {
      $("#<%=txtSearchProductID.ClientID%>").val(jsonObj.find(x => x.name == suggestion).id);
   });
}

在我的代码中,正在加载产品 Product.GetList_basic方法返回由id和name属性组成的动态对象数组。

protected void Page_Load(object sender, EventArgs e)
   {

      List<dynamic> prodotti = Product.GetList_basic(((User)HttpContext.Current.Session["UTENTE"]).ID_SiteMaster);
      var json = new JavaScriptSerializer().Serialize(prodotti);
      txtProductNames.Text = json;
      ScriptManager.RegisterStartupScript(this, typeof(Page), "CaricaProdotti", "CaricaProdotti();", true);
   }

This is the result of my search box

我想做的是,如果我写“ atter g5”一词,它会返回相同的结果。 no results

我想我必须与Bloodhound令牌生成器一起工作,但我不知道该如何做。 而且我在网上找不到任何东西。

0 个答案:

没有答案