Bootstrap Typeahead does not show a sentence that has a Key value starting with the same value

Question

I use typeahead v0.11.1 to show the result, but it does not show the result, the result of which starts with the same result.

The result that I get from the database is the following:

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 } 

The problem is that typeahead displays the whole result except
Sr. Android Developer Sr. Android Developer and Sr. iOS 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: "<div class='position-wrapper'><a class='ad-ps'><i class='fa fa-user-secret'></i> Add New Position</a></div>", notFound: function(){ var ps=$('#Position').val(); $('#PositionId').val(""); return "<div class='position-wrapper'><p>No Position found.</p><a class='ad-ps'><i class='fa fa-user-secret'></i> Add New Position</a></div>"; }, suggestion: Handlebars.compile('<div class="position-wrapper">'+ '<div class="poosition-info-wrapper">'+ '<span>{{Title}}</span>'+ '</div>'+ '</div>') } }); 

Answer 1

Note. Not sure about the expected result.

 $("#PositionId").val(""); 

?; html does not appear in the question; .typeahead() seems to be initialized to

 $("#Position") 

without "Id" in the selector string?

---

The problem is that typeahead displays the whole result except Sr. Android Developer and Senior iOS Developer

Appears due to a period symbol . inside the string value of the Title property of the returned obeject. .typeahead displayed according to the exact input value of the request. eg.,; if the request was "sr .typeahead would not match" Sr. "; if the request was "sr". .typeahead will match "Senior Android Developer," "Senior iOS Developer." The adjusted test for returned matches, which will be displayed in templates , as part of the filter function during the initialization of Bloodhound ; deleted period character "." from the conformance test to before the results return to templates . If the request is “sr,” it should return both “Senior Android Developer,” “Senior iOS Developer.” If the request is "sr ios", it should return "Sr. iOS Developer" in the templates to display as suggestion .

Try setting the Bloodhound.tokenizers.obj.whitespace setting to "value" ; returning object in templates suggestion callback function in filter during Bloodhound initialization; returning the " html " suggestion in the templates suggestion callback function using the object passed to the filter inside the Bloodhound initialization

 $(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: "<div class=position-wrapper>" + "<a class=ad-ps><i class=fa fa-user-secret></i>" + " Add New Position</a></div>", // 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 "<div class=position-wrapper>" + "<p>No Position found.</p>" + "<a class=ad-ps>" + "<i class=fa fa-user-secret></i>" + " Add New Position" + "</a></div>"; }, // set `templates` `suggestion` `html` suggestion: function(data) { // `data`: `positions` object passed at // `Bloodhound` `remote` `local` var details = "<div class=resultContainer>" + "Title: " + "<b style=color:blue>" + data.suggest.Title + "</b>" + "<div class=resultDesc>" + "Description: <b>" + data.suggest.Description + "</b>" + "</div>" + "<div class=resultLabel>Id: " + "<b>" + data.suggest.Id + "</b><br />" + "Company Id: " + "<b>" + data.suggest.CompanyId + "</b>" + "</div></div>"; 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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://twitter.imtqy.com/typeahead.js/releases/latest/typeahead.bundle.js"> </script> <input type="text" id="PositionId" /> <div class="typeahead-container"> <input type="text" id="Position" class="typeahead tt-query" placeholder="positions" /> </div>