Click here to Skip to main content
15,919,613 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am trying to use the twitter typeahead with jquery to get the matching records from the database, but it does not show up.. I have tried using the following code... Can somebody please help me with the code ???? I have referred to the following link as well..but still it does not show up

Twitter typeahead is not working on ASP.NET[^]

What I have tried:

JavaScript
$(document).ready(function () {
           console.log("Debugging started");
       });

           $("#customer").mouseleave(function () {
               debugger;
                   var searchlist = new Bloodhound({
                       datumTokenizer: function (searchlist) {
                           return Bloodhound.tokenizers.whitespace("customerName");
                       },
                       queryTokenizer: Bloodhound.tokenizers.whitespace,
                       remote: {
                           url: '/api/Customers?query=%QUERY',
                           wildcard: '%QUERY',
                           filter: function (response) {
                               return response.customerName;
                           }
                       }
                   });

                    //Initialize the searchlist
                   searchlist.initialize();

                   $('#customer').typeahead({
                       hint: true,
                       highlight: true,
                       minLength: 3
                   },
                       {
                           name: 'searchlist',
                           displayKey: function (suggestions) { return suggestions.keyword },
                           source: searchlist.ttAdapter(),
                           limit: 10
                       });
                         
           });
Posted
Updated 24-Jun-20 22:58pm
v3
Comments
F-ES Sitecore 25-Jun-20 8:19am    
Where the javascript is in the context of a page matters. Your $("customer") code isn't running in the dom ready event, it is running wherever it is in the html document so it could be that the "customer" element does not yet exist when the js runs so no events are attached. Does the "debugger" statement fire when you leave the customer element? And initialising the type-ahead in that event doesn't seem to make much sense.
Member 14872744 25-Jun-20 12:52pm    
Thanks a lot for your response...
I have tried it by writing all the code at the page load event ie $(document).ready().. it still works the same as in the above code ie... I get all the customer names from the database instead of the matching ones.. My requirement is to get the matching ones only and not the complete list of customers.
Member 14872744 25-Jun-20 13:00pm    
My modified code



$(document).ready(function () {
var customers = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('customerName'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/Customers?query=%QUERY',
wildcard: '%QUERY'
},
sufficient: 25
});

$('#customer').typeahead(
{
minLength: 2,
highlight: true
}, {
limit: 25,
name: 'customers',
display: 'customerName',
source: customers
});

});


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900