I'm trying to get the Tagit plugin to work with a jQuery Autocomplete field I have.
The autocomplete field was pulling from a remote data source to get tags from wordpress. The auto complete on its own does this fine, as you type it brings up suggestions for keywords.
I thought installing Tagit would just take the same attributes as the jQuery UI plugin, and therefore still suggest keywords via AJAX.
Does anyone know how to get this working?
The jQuery UI code I had originally is:
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$('.sub-category-input').change(function() {
$(this).next().val($(this).val());
});
$('.sub-category-input')
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
_resizeMenu: function() {
this.menu.element.outerWidth(300);
},
source: function( request, response ) {
$('.searching').show();
$.getJSON( "/wp-content/themes/woa-2014/sub-cats.php", {
term: extractLast( request.term )
}, response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
response: function( event, ui ) {
$('.searching').hide();
},
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( ", " );
$("#what").val(terms.join( ", " ));
return false;
},
});
And the code for Tagit is simply:
$(".sub-category-input").tagit({
removeConfirmation: true,
allowSpaces: true
});
Related
I have this function that releases a drop-down menu with variables which then if I click inserts it into an input, my problem is that I close the div used in modal. I would like to understand where the problem is or if there is a solution, I thought that every time I type the div modal with false the parameters bg-close and esc-close and I reset them to true if I finish writing inside the box 'input. I don't know how to help…
This's the function get problem:
$(function() {
var a_performance = ["one", "two"];
$("#form-title-performace").on("keydown", function(event) {
if(event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 2,
source: function( request, response ) {
response( $.ui.autocomplete.filter(
a_performance, extractLast( request.term ) ) );
},
focus: function() {
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
terms.pop();
terms.push( ui.item.value );
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
I know the problem lies in the fact that the autocomplete div is not part of the uk-modal div set. Could you insert the autocomplete result into a specific div?
It happens because the autocomplete result is not inside the uk-modal div if you click on an element outside that div, uikit closes.
So you have to put this in your code, of course the id you can change for something else
$(function() {
var a_performance = ["one", "two"];
$("#form-title-performace").on("keydown", function(event) {
if(event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 2,
source: function( request, response ) {
response( $.ui.autocomplete.filter(
a_performance, extractLast( request.term ) ) );
},
focus: function() {
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
terms.pop();
terms.push( ui.item.value );
terms.push( "" );
this.value = terms.join( ", " );
return false;
},
appendTo: "#div-result"
});
});
I'm using this snippet to let the user choose from a list of cities, and insert them in a textarea, comma separated. That works.
I'd like to reach this objective: the user writes a part of the city name for searching it, similar to a combobox, but if he doesn't select one of the options and leaves the field, the inserted data should be erased.
So, briefly, I'd like to implement a sort of validation that prevents the users to fill the field with a string that is not a complete city name, before submitting the form.
Any ideas?
Thank you!
jQuery( function() {
var availableTags = [
"Agliè (TO)",
"Airasca (TO)",
//--- the other cities list ---
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
jQuery( 'textarea[data-wpt-id=wpcf-comuni-caldo],textarea[data-wpt-id=wpcf-comuni-freddo],textarea[data-wpt-id=wpcf-comuni-alta-potenza]' )
//,input[name=wpv-wpcf-comuni-caldo],input[name=wpv-wpcf-comuni-freddo],input[name=wpv-wpcf-comuni-alta-potenza]
// don't navigate away from the field on tab when selecting an item
.on( "keydown", function( event ) {
if ( event.keyCode === jQuery.ui.keyCode.TAB &&
jQuery( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( jQuery.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
autoFill:true,
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 solved this myself, as below.
jQuery( function() {
var availableTags = [
"Agliè (TO)",
"Airasca (TO)",
//--- the other cities list ---
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
var valoreAttuale = "";
jQuery( 'textarea[data-wpt-id=wpcf-comuni-caldo],textarea[data-wpt-id=wpcf-comuni-freddo],textarea[data-wpt-id=wpcf-comuni-alta-potenza]' ).focus(function() { //al primo click nel campo, memorizzo le città attuali
valoreAttuale = jQuery(this).val();
console.log(valoreAttuale);
});
jQuery( 'textarea[data-wpt-id=wpcf-comuni-caldo],textarea[data-wpt-id=wpcf-comuni-freddo],textarea[data-wpt-id=wpcf-comuni-alta-potenza]' )
//,input[name=wpv-wpcf-comuni-caldo],input[name=wpv-wpcf-comuni-freddo],input[name=wpv-wpcf-comuni-alta-potenza]
// don't navigate away from the field on tab when selecting an item
.on( "keydown", function( event ) {
if ( event.keyCode === jQuery.ui.keyCode.TAB &&
jQuery( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( jQuery.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
autoFill:true,
change: function (event, ui)
{
if (!ui.label) { this.value = valoreAttuale; }
},
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( ", " );
valoreAttuale = jQuery(this).val();
console.log(valoreAttuale);
return false;
}
});
} );
I save the current value (valoreAttuale) on focus;
If the user selects a suggested value, that will be added to the textarea and valoreAttuale gets updated; if the user types anything else (not in the array), jQuery restores the previous value of the field (valoreAttuale).
I need help, I am stuck with trying to make the following case scenario work:
You have email input field, you type: foo#y - it should pop up autocomplete box, offering yahoo.com (for example).
If you take this suggestion, the end value should become: foo#yahoo.com
I have wrote this code (modified off another jquery UI sample):
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 3,
source: function( request, response ) {
var mail_regex = /^([\w.]+)#([\w.]+)$/;
var match = mail_regex.exec(request.term);
if (match)
var matcher = new RegExp( "^" + match[2], "i" );
response( $.grep( availableTags, function( item ){
return matcher.test( item );
}) );
},
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;
}
});
Full working interactive sample:
http://jsfiddle.net/rRF2s/3/
However, it REPLACES the foo# with just yahoo.com - I can not for the life of me figure out how to override this behaviour...
Any Javascript/jQuery masters - help please! how to accomplish this goal?
I tried doing: return match[1]+matcher.test( item ), but that does not work.
The select function is assigning the resultant value with this.value =. However it is replacing the input value completely rather than appending it with the drop down value.
Without a great deal of testing the following, simplified function seems to work as required:
select: function( event, ui ) {
this.value = this.value.substring(0, this.value.indexOf('#') + 1) + ui.item.value;
return false;
}
This is taking the first part of the already entered value, for example foo# for the input foo#ya and then adding on the value of the selected item from the drop down.
You may want to trigger the dropdown when someone enters the # symbol (seems more intuitive to me) and if so, this function may also need modifying to correctly extract the user entered value.
Here is the complete code:
$(function() {
var availableTags = [
"Yahoo.com",
"Gmail.com"
];
function extractLast( val ) {
if (val.indexOf("#")!=-1){
var tmp=val.split("#");
console.log(tmp[tmp.length-1]);
return tmp[tmp.length-1];
}
console.log("returning empty");
return "";
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 1,
source: function( request, response ) {
var mail = extractLast(request.term);
if(mail.length<1){return;}
var matcher = new RegExp( "^" + mail, "i" );
response( $.grep( availableTags, function( item ){
return matcher.test( item );
}));
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = this.value.split(", ");
// remove the current input
var ml=terms[terms.length-1].split("#")[0];
terms.pop();
// add the selected item
terms.push( ml+"#"+ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
I have a local array for autocomplete which works well.
How do I add 'space' as a delimeter to "tagify" the string that is not from the source array. So far it only works with comma ", "
I'm using stock code from the jquery ui site.
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#create-post__search-field--tags" )
// 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: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, 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 would prefer not using 3rd party libs for tagging. My needs are met with a simple autocomplete.
I will use a patch if its available.
Thank you
I have the following tags.json file:
[
{"label" : "Aragorn"},
{"label" : "Arwen"},
{"label" : "Bilbo Baggins"},
{"label" : "Boromir"}
]
And the following javascript code (The same from the working demo):
<script>
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#people" ) //DIFF FROM DEMO
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
$.getJSON( 'tags.json', { //DIFF FROM DEMO
term: extractLast( request.term )
}, response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
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;
}
});
});
</script>
But when I type for example: "ar" in my input box, I get Aragorn, Arwen, Bilbo Baggins and Boromir. I can't figure out why Bilbo and Boromir are in the results ? I should only get Aragorn and Arwen because these strings contain the 'ar' string...
The problem is that in the jQuery example the $.getJSON() function calls some server side script that does something with the term parameter, i.e. filters the names. The tags.json file, in your case, is returned as is, which includes all results. If you want to filter results based on something, e.g. the term entered, you need to apply that filtering before you call response (which is currently the callback of your $.getJSON() function).