0
Using the following javascript code
$.getJSON("../JSON/TAGS.json", function(tags) {
var tagsArray = [];
for(var i=0; i<tags.length; i++){
tagsArray.push(tags[i].tag);
}
function split( val ) {
return val.split( / \s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tag" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 2,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
tagsArray, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( " " );
return false;
}
});
});
I can make it auto complete for multiple words and words outside the array but every time I give a space is displayed the list of words available for selection (400 words)
the
autocomplete
jqueryui does not multiselect by default, but you can add this functionality through custom code. Demo of jqueryui itself: http://jqueryui.com/autocomplete/#Multiple– Oeslei
@Oeslei I will check and already comment
– Ricardo
@Oeslei I pasted the corresponding code, but where will I put the array of floods?
– Ricardo
Replace the variable
availableTags
in the code by its array, i.e., the variabletagsArray
.– Oeslei
@Oeslei made the modifications (including modified the separation characters "," for " ") and this working with rebounds 1º every time I give a space is displayed the whole list, 2º the JSON is loaded all together with the page or only when I click on the input because the JSON has some 10KB
– Ricardo