javascript - Bootstrap Typeahead not showing suggestion which have the valueKey starting with same value -
i'm using typeahead v0.11.1 show result not showing result have result starting same result.
the result getting database :
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 }
problem typeahead displaying result except
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 remote source json array 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>') } });
note, not expected result of
$("#positionid").val(""); ? ; html not appear @ question ; .typeahead() appear initialized @
$("#position") element , without "id" within selector string ?
the problem typeahead displaying result except sr. android developer , sr. ios developer
appear due period character . within string value of title property of returned obeject . .typeahead appear match exact input value of query . e.g.,; if query "sr" .typeahead not match "sr." ; if query "sr." .typeahead match "sr. android developer" , "sr. ios developer" . adjusted test returned matches displayed within templates , within filter function @ bloodhound initialization ; removed period character "." match test before results returned templates. if query "sr" , should return both "sr. android developer" , "sr. ios developer" . if query "sr ios" , should return "sr. ios developer" templates display suggestion .
try creating setting bloodhound.tokenizers.obj.whitespace "value" ; returning object templates suggestion callback function within filter @ bloodhound inititalization ; returning "suggestion" html @ templates suggestion callback function , utilizing object passed @ filter within bloodhound initialization
$(function() { var search = $(".typeahead-container #position.typeahead"); // `positions` settings var positions = new bloodhound({ // set `bloodhound.tokenizers.obj.whitespace` `"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 `positions`:`data` `title`, // return `suggest` property having value set `positions` object, // utilized @ `suggestion` callback // remove periof character "." match test return new regexp( search.val() + "|" + search.val().replace(".", "") , "i") .test(positions.title.replace(".", "")) ? { value: positions.title, suggest: positions } : null }) } } /* // run "local" data source ; e.g., `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 expected result of calling `.val()` // on `#position` ?, without argument passed `.val()` ? var ps = $('#position').val(); // not expected result of setting // `#positionid` `.val()` 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 @ // `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 `local` data source // `data`: `"data.json"` ; e.g., `data` @ `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.github.io/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>
Comments
Post a Comment