Here, Try doing it like this :
var availableTags = [
"Perl",
"PHP",
"Python",
"Ruby"
];
$('input#mainSearchBox').autocomplete({
source: availableTags,
minLength: 0
});
$('input#mainSearchBox').autocomplete("disable");
$('input#mainSearchBox').keyup(function() {
var value = $('input#mainSearchBox').val();
var last = value.substr(value.length - 1);
if (last == "*") {
var valToSearch = value.substr(0, value.length - 1);
$('input#mainSearchBox').autocomplete("enable");
$('input#mainSearchBox').autocomplete("search", valToSearch);
} else {
$('input#mainSearchBox').autocomplete("disable");
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" name="test" id="mainSearchBox">
References :
Have a look at :
- http://api.jqueryui.com/autocomplete/#method-search
- http://api.jqueryui.com/autocomplete/#method-enable
- http://api.jqueryui.com/autocomplete/#method-disable
What I have done :
- Loaded/Initialized
autocompleteon the textbox and then disabled it. - Whenever key-up event is triggered, I checked if last character in the input is
*,
a. if it is, then enable autocomplete and force search on the text-box, with the input value without *.
b. If it is not, then disable the autocomplete.
I established this blog in order to publish code related articles, code hints, code workarounds and tips and tricks.