2
0
mirror of https://github.com/devbridge/jQuery-Autocomplete.git synced 2024-12-01 17:23:59 +00:00

Added presentation settings for showing category and suggestion while hovering over appropriate divs (by embedding them in title attributes).

This commit is contained in:
Preetpal Sohal 2016-06-15 17:01:38 -07:00
parent 95a329d80d
commit af8560d12d
2 changed files with 14 additions and 2 deletions

View File

@ -62,6 +62,8 @@ The standard jquery.autocomplete.js file is around 13KB when minified.
* `preserveInput`: if `true`, input value stays the same when navigating over suggestions. Default: `false`. * `preserveInput`: if `true`, input value stays the same when navigating over suggestions. Default: `false`.
* `showNoSuggestionNotice`: Default `false`. When no matching results, display a notification label. * `showNoSuggestionNotice`: Default `false`. When no matching results, display a notification label.
* `noSuggestionNotice`: Default `No results`. Text or htmlString or Element or jQuery object for no matching results label. * `noSuggestionNotice`: Default `No results`. Text or htmlString or Element or jQuery object for no matching results label.
* `showCategoryOnHover`: Default `false`. Embeds category in title attribute for each autocomplete-group div.
* `showSuggestionOnHover`: Default `false`. Embeds suggestion in title attribute for each autocomplete-suggestion div.
* `onInvalidateSelection`: `function () {}` called when input is altered after selection has been made. `this` is bound to input element. * `onInvalidateSelection`: `function () {}` called when input is altered after selection has been made. `this` is bound to input element.
* `tabDisabled`: Default `false`. Set to true to leave the cursor in the input field after the user tabs to select a suggestion. * `tabDisabled`: Default `false`. Set to true to leave the cursor in the input field after the user tabs to select a suggestion.

View File

@ -90,6 +90,8 @@
}, },
showNoSuggestionNotice: false, showNoSuggestionNotice: false,
noSuggestionNotice: 'No results', noSuggestionNotice: 'No results',
showCategoryOnHover: false,
showSuggestionOnHover: false,
orientation: 'bottom', orientation: 'bottom',
forceFixPosition: false forceFixPosition: false
}; };
@ -666,7 +668,11 @@
category = currentCategory; category = currentCategory;
return '<div class="autocomplete-group"><strong>' + category + '</strong></div>'; if (options.showCategoryOnHover) {
return '<div class="autocomplete-group" title="' + category + '"><strong>' + category + '</strong></div>';
} else {
return '<div class="autocomplete-group"' + '><strong>' + category + '</strong></div>';
}
}; };
if (options.triggerSelectOnValidInput && that.isExactMatch(value)) { if (options.triggerSelectOnValidInput && that.isExactMatch(value)) {
@ -680,7 +686,11 @@
html += formatGroup(suggestion, value, i); html += formatGroup(suggestion, value, i);
} }
if (options.showSuggestionOnHover) {
html += '<div class="' + className + '" data-index="' + i + '" title="' + suggestion.value + '">' + formatResult(suggestion, value, i) + '</div>';
} else {
html += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value, i) + '</div>'; html += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value, i) + '</div>';
}
}); });
this.adjustContainerWidth(); this.adjustContainerWidth();