Destramic Posted July 12, 2014 Share Posted July 12, 2014 Hey guys im having 2 minor problems with my script if someone can give me some advise please? (all 2 problems are commented on the script itself) 1. highlighting string characters when typed. 2. also im trying to add "Hide Suggestions" at the bottom of my menu so people can turn on/off autocomplete $(document).ready(function() { function search_autocomplete(selector, tags, default_value) { $('#' + selector).focus(function() { if($('#' + selector).val() == default_value) { $('#' + selector).val(''); } }); $('#' + selector).blur(function() { if($('#' + selector).val() == '') { $('#' + selector).val(default_value); } }); $('#' + selector).autocomplete( { source: tags, timeout: 0, select: function (a, b) { $(this).val(b.item.value); //submit }, create: function () { $(this).data('ui-autocomplete')._renderItem = function (ul, item) { // not highlighting when string characters match var re = new RegExp('^' + this.term); var t = item.label.replace(re, "<span id='dropdown-item-highlight'>" + "$&" + "</span>"); return $('<li></li>') .append('<a>' + t + ' in ' + item.type + '</a>') .addClass( 'dropdown-item' ) .appendTo(ul); }; } }); $(this).data('ui-autocomplete')._renderMenu = function (ul, item) { // unable to show "Hide Suggestions at the bottom of the autocomplete menu return $('<ul></ul>') .append('<a>Hide Suggestions</a>') .addClass( 'dropdown-menu' ); }; } var availableTags = [{"label" : "XBOX 360", "type":"Electronics"}, {"label":"XBOX One", "type":"Electronics"}, {"label":"Nike", "type":"Clothing & Footwear"}]; search_autocomplete('query', availableTags, 'Search...'); }); thanks Quote Link to comment https://forums.phpfreaks.com/topic/289789-jquery-autocomplete-minor-problems/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.