Auto complete in jquery
Auto complete in jquery
Require
A smile and... done.
Autocomplete with default
Create file aucomplete.html and start edit it:
Add input tag with text type
<body>
<input type="text" />
</body>
Import jquery 1.9.1 and jquery ui 1.9.2
<body>
<input type="text" />
</body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
crossorigin="anonymous"></script>
<input type="text" />
</body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
crossorigin="anonymous"></script>
Add js function call autocomplete
<body>
<input type="text" />
</body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
crossorigin="anonymous"></script>
<script>
var json = ["alaska", "BERNARDINO", "MODOC","ALASKA","MADERA", "ANDERSON", "Kingston","Kala","Aka"];
json.sort();
$('input').autocomplete({
source: function( request, response ) {
var matches = $.ui.autocomplete.filter(json, request.term);
response(matches);
}
});
</script>
This is result, show all words has 'a' character.
Autocomplete match begin
Like above example, we just change in autocomplete function:
$('input').autocomplete({
source: function( request, response ) {
var matches = $.map( json, function(json) {
if ( json.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return json;
}
});
response(matches);
}
});
This is result, just show the words begin with 'a' character.source: function( request, response ) {
var matches = $.map( json, function(json) {
if ( json.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return json;
}
});
response(matches);
}
});
Autocomplete mixed (begin first, then related)
Same 2 above examples, edit autocomplete function:
$('input').autocomplete({
source: function( request, response ) {
//var matches = $.ui.autocomplete.filter(json, request.term);
var matches = $.map( json, function(json) {
if ( json.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return json;
}
});
$.map( json, function(json) {
if ( json.toUpperCase().indexOf(request.term.toUpperCase()) > 0 ) {
matches.push(json);
}
});
response(matches);
}
});
This is result, first the words begin with 'a' and then the words has 'a'.source: function( request, response ) {
//var matches = $.ui.autocomplete.filter(json, request.term);
var matches = $.map( json, function(json) {
if ( json.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return json;
}
});
$.map( json, function(json) {
if ( json.toUpperCase().indexOf(request.term.toUpperCase()) > 0 ) {
matches.push(json);
}
});
response(matches);
}
});
Autocomplete perfect :D (mixed + split )
var json = ["alaska", "BERNARDINO", "MODOC","ALASKA","MADERA", "ANDERSON", "Kingston","Kala","Aka"];
json.sort();
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$('input').autocomplete({
source: function( request, response ) {
//default
//var matches = $.ui.autocomplete.filter(json, request.term);
// match begin
/* var matches = $.map( json, function(json) {
if ( json.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return json;
}
}); */
// mixed
/* $.map( json, function(json) {
if ( json.toUpperCase().indexOf(request.term.toUpperCase()) > 0 ) {
matches.push(json);
}
}); */
// best
var matches = $.map( json, function(json) {
if ( json.toUpperCase().indexOf(extractLast(request.term).toUpperCase()) === 0 ) {
return json;
}
});
$.map( json, function(json) {
if ( json.toUpperCase().indexOf(extractLast(request.term).toUpperCase()) > 0 ) {
matches.push(json);
}
});
response(matches);
}
});
json.sort();
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$('input').autocomplete({
source: function( request, response ) {
//default
//var matches = $.ui.autocomplete.filter(json, request.term);
// match begin
/* var matches = $.map( json, function(json) {
if ( json.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return json;
}
}); */
// mixed
/* $.map( json, function(json) {
if ( json.toUpperCase().indexOf(request.term.toUpperCase()) > 0 ) {
matches.push(json);
}
}); */
// best
var matches = $.map( json, function(json) {
if ( json.toUpperCase().indexOf(extractLast(request.term).toUpperCase()) === 0 ) {
return json;
}
});
$.map( json, function(json) {
if ( json.toUpperCase().indexOf(extractLast(request.term).toUpperCase()) > 0 ) {
matches.push(json);
}
});
response(matches);
}
});
Conclusion
You can practice with all my example. See all demo here. Thanks for reading.
Nhận xét
Đăng nhận xét