Bootstrap Typeahead没有显示valueKey以相同值开头的建议
我正在使用typeahead v0.11.1来显示结果，但它没有显示结果，结果以相同的结果开头。
我从数据库得到的结果是这样的：
Object { Id: 4, Title: "project manager", Description: "project manager", CompanyId: 1 } Object { Id: 6, Title: "Software Developer", Description: "Software Developer", CompanyId: 1 } Object { Id: 7, Title: ".NET Developer", Description: ".NET Developer", CompanyId: 1 } Object { Id: 10, Title: "Android Developer", Description: "Android Developer", CompanyId: 1 } Object { Id: 11, Title: "iOS Developer", Description: "iOS Developer", CompanyId: 1 } Object { Id: 13, Title: "Sr. Android Developer", Description: "Sr. Android Developer", CompanyId: 1 } Object { Id: 14, Title: "Sr. iOS Developer", Description: "Sr. iOS Developer", CompanyId: 1 } 问题是typeahead显示除了之外的所有结果
Sr. Android Developer和Sr. iOS Developer
var position = new Bloodhound({ datumTokenizer: function (datum) { return Bloodhound.tokenizers.whitespace(datum.Title); }, queryTokenizer: Bloodhound.tokenizers.whitespace, //prefetch: '../data/films/post_1960.json', remote: { url: '/Search/Positions?query=%QUERY', wildcard: '%QUERY', filter:function (positionList) { // Map the remote source JSON array to a JavaScript object array return $.map(positionList, function (position) { console.log("position is:", position); return { Title: position.Title }; }); } } }); var promisepos=position.initialize(); promisepos.done(function(){}); $('#Position').typeahead({ minLength:1, highlight:true, hint:false },{ name: 'positionList', displayKey:'Title', source:position.ttAdapter(), templates:{ footer: "", notFound: function(){ var ps=$('#Position').val(); $('#PositionId').val(""); return "No Position found.
Add New Position"; }, suggestion: Handlebars.compile(''+ ''+ '{{Title}}'+ ''+ '') } });
注意，不确定预期的结果
$("#PositionId").val("");
？ ; html没有出现在Question; .typeahead()似乎在初始化
$("#Position")
元素，选择器字符串中没有“Id”？
问题是typeahead显示除了Sr. Android Developer和Sr. iOS Developer之外的所有结果
由于时期特征而出现. 在返回的obeject的Title属性的字符串值内。 .typeahead似乎匹配查询的确切输入值。 例如，; 如果查询是“sr” .typeahead将不匹配“Sr.” ; 如果查询是“sr。” .typeahead将匹配“Sr. Android Developer”，“Sr. iOS Developer”。 在Bloodhound初始化的filter函数中，将在templates显示的返回匹配的调整测试; 删除了句号字符“。” 在结果返回templates之前从匹配测试。 如果查询是“sr”，则应返回“Sr. Android Developer”，“Sr. iOS Developer”。 如果查询是“sr ios”，则应将“Sr. iOS Developer”返回到templates以显示为suggestion 。
尝试创建将Bloodhound.tokenizers.obj.whitespace设置为"value" ; 将对象返回到Bloodhound filter内的templates suggestion回调函数; 在templates suggestion回调函数中返回“suggestion” html ，利用Bloodhound初始化filter中传递的对象
$(function() { var search = $(".typeahead-container #Position.typeahead"); // `positions` settings var positions = new Bloodhound({ // set `Bloodhound.tokenizers.obj.whitespace` to `"value"` datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: "https://gist.githubusercontent.com/anonymous/" + "cd07af7c8e3dbbeb601f/raw/" + "936a69aa84e48c2cf96682ff044d3ace87750457/data.json" + "?query=%QUERY", wildcard: "%QUERY", filter: function (pos) { return $.map(pos, function(positions) { // return `value` set to `positions`:`data` `Title`, // return `suggest` property having value set to `positions` object, // utilized at `suggestion` callback // remove periof character "." from match test return new RegExp( search.val() + "|" + search.val().replace(".", "") , "i") .test(positions.Title.replace(".", "")) ? { value: positions.Title, suggest: positions } : null }) } } /* // run with "local" data source ; eg, `data` local: $.map(data, function(positions) { return { value: positions.Tile, suggest: positions } }) */ }); var promisepos = positions.initialize(); promisepos .done(function() { console.log("positions initialized"); }) .fail(function() { console.log("positions initialization error"); }); search.typeahead({ minLength: 1, highlight: true, hint: false }, { name: "positionList", displayKey: "Title", templates: { // set `templates` `footer` `html` footer: "", // set `templates` `notFound` `html` notFound: function() { // not certain expected result of calling `.val()` // on `#Position` ?, without argument passed to `.val()` ? var ps = $('#Position').val(); // not certain expected result of setting // `#PositionId` `.val()` to empty string ? $("#PositionId").val(""); return "" + "No Position found.
" + "" + "" + " Add New Position" + ""; }, // set `templates` `suggestion` `html` suggestion: function(data) { // `data`: `positions` object passed at // `Bloodhound` `remote` `local` var details = "" + "Title: " + "" + data.suggest.Title + "" + "" + "Description: " + data.suggest.Description + "" + "" + "Id: " + "" + data.suggest.Id + "
" + "Company Id: " + "" + data.suggest.CompanyId + "" + ""; return details } }, source: positions.ttAdapter() }); }); /* // run with `local` data source // `data`: `"data.json"` ; eg, `data` at `local` var data = [ { "Id": 4, "Title": "project manager", "Description": "project manager", "CompanyId": 1 }, { "Id": 6, "Title": "Software Developer", "Description": "Software Developer", "CompanyId": 1 }, { "Id": 7, "Title": ".NET Developer", "Description": ".NET Developer", "CompanyId": 1 }, { "Id": 10, "Title": "Android Developer", "Description": "Android Developer", "CompanyId": 1 }, { "Id": 11, "Title": "iOS Developer", "Description": "iOS Developer", "CompanyId": 1 }, { "Id": 13, "Title": "Sr. Android Developer", "Description": "Sr. Android Developer", "CompanyId": 1 }, { "Id": 14, "Title": "Sr. iOS Developer", "Description": "Sr. iOS Developer", "CompanyId": 1 } ]; */
.typeahead-container { font-family: sans-serif; position: relative; margin: 100px; } .typeahead, .tt-query, .tt-hint { border: 2px solid #CCCCCC; border-radius: 8px; font-size: 24px; height: 30px; line-height: 30px; outline: medium none; padding: 8px 12px; width: 396px; } .typeahead { background-color: #FFFFFF; } .typeahead:focus { border: 2px solid #0097CF; } .tt-query { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; } .tt-hint { color: #999999; } .tt-dropdown-menu { background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin-top: 12px; padding: 8px 0; width: 422px; } .tt-suggestion { font-size: 24px; line-height: 24px; padding: 3px 20px; } .tt-suggestion.tt-is-under-cursor { background-color: #0097CF; color: #FFFFFF; } .tt-suggestion p { margin: 0; } .resultContainer { width: 410px; border: 1px dotted grey; border-radius: 10px; padding: 4px; margin: 4px; } .resultDesc, .resultLabel { font-size: 14px; font-style: italic; }