We Keep Coding

jQuery - Duplicate Fields & Autocomplete

I have a form with duplicate fields including autocomplete input.
The issue is : when i duplicate the fields, the autocomplete doesn't work on the new fields.
I spent time googling my issue and often it's a clone('true') issue, which i don't use already and still have the problem.
Can you help me please ? Thanks a lot !
I made a JSFiddle : https://jsfiddle.net/vqnaedvx/
Try with the letter j or s
HTML :
<div id="projects" class="content">
<button type="button" id="btnAdd" class="btn btn-primary btn-sm">Add Project</button>
<div class="row form-group group">
<input class="project-label">
<input type="hidden" class="project-id">
<button type="button" class="btn btn-danger btnRemove">Remove</button>
</div>
</div>
JS Multifield :
/**
* jQuery Multifield plugin
*
* https://github.com/maxkostinevich/jquery-multifield
*/
;(function ( $, window, document, undefined ) {
// our plugin constructor
var multiField = function( elem, options ){
this.elem = elem;
this.$elem = $(elem);
this.options = options;
// Localization
this.localize_i18n={
"multiField": {
"messages": {
"removeConfirmation": "Are you sure you want to remove this section?"
}
}
};
this.metadata = this.$elem.data( 'mfield-options' );
};
// the plugin prototype
multiField.prototype = {
defaults: {
max: 0,
locale: 'default'
},
init: function() {
var $this = this; //Plugin object
// Introduce defaults that can be extended either
// globally or using an object literal.
this.config = $.extend({}, this.defaults, this.options,
this.metadata);
// Load localization object
if(this.config.locale !== 'default'){
$this.localize_i18n = this.config.locale;
}
// Hide 'Remove' buttons if only one section exists
if(this.getSectionsCount()<2) {
$(this.config.btnRemove, this.$elem).hide();
}
// Add section
this.$elem.on('click',this.config.btnAdd,function(e){
e.preventDefault();
$this.cloneSection();
});
// Remove section
this.$elem.on('click',this.config.btnRemove,function(e){
e.preventDefault();
var currentSection=$(e.target.closest($this.config.section));
$this.removeSection(currentSection);
});
return this;
},
/*
* Add new section
*/
cloneSection : function() {
// Allow to add only allowed max count of sections
if((this.config.max!==0)&&(this.getSectionsCount()+1)>this.config.max){
return false;
}
// Clone last section
var newChild = $(this.config.section, this.$elem).last().clone().attr('style', '').attr('id', '').fadeIn('fast');
// Clear input values
$('input[type=text],input[type=hidden],textarea', newChild).each(function () {
$(this).val('');
});
// Fix radio buttons: update name [i] to [i+1]
newChild.find('input[type="radio"]').each(function(){var name=$(this).attr('name');$(this).attr('name',name.replace(/([0-9]+)/g,1*(name.match(/([0-9]+)/g))+1));});
// Reset radio button selection
$('input[type=radio]',newChild).attr('checked', false);
// Clear images src with reset-image-src class
$('img.reset-image-src', newChild).each(function () {
$(this).attr('src', '');
});
// Append new section
this.$elem.append(newChild);
// Show 'remove' button
$(this.config.btnRemove, this.$elem).show();
},
/*
* Remove existing section
*/
removeSection : function(section){
if (confirm(this.localize_i18n.multiField.messages.removeConfirmation)){
var sectionsCount = this.getSectionsCount();
if(sectionsCount<=2){
$(this.config.btnRemove,this.$elem).hide();
}
section.slideUp('fast', function () {$(this).detach();});
}
},
/*
* Get sections count
*/
getSectionsCount: function(){
return this.$elem.children(this.config.section).length;
}
};
multiField.defaults = multiField.prototype.defaults;
$.fn.multifield = function(options) {
return this.each(function() {
new multiField(this, options).init();
});
};
})( jQuery, window, document );
$('#projects').multifield({
section: '.group',
btnAdd:'#btnAdd',
btnRemove:'.btnRemove'
});
JS Autocomplete :
$( function() {
var projects = [
{
value: "jquery",
label: "jQuery"
},
{
value: "jquery-ui",
label: "jQuery UI"
},
{
value: "sizzlejs",
label: "Sizzle JS"
}
];
$( ".project-label" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( ".project-label" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( ".project-label" ).val( ui.item.label );
$( ".project-id" ).val( ui.item.value );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.label + "</div>" )
.appendTo( ul );
};
} );

you have 2 probs here:
1.Your code only for one input textfield. if u add more textfields, all value of textfields will have the same value. u need call autocomplete in foreach
2.After u press add input jquery not call autocomplete again(new input doesn't have autocomplete). So you need call it after new input added.
fixed here:
declare global function:
/**
* jQuery Autocomplete
*/
$( function() {
var projects = [
{
value: "jquery",
label: "jQuery"
},
{
value: "jquery-ui",
label: "jQuery UI"
},
{
value: "sizzlejs",
label: "Sizzle JS"
}
];
refreshAuto = function(){
$(".project-label").each(function(idx,ele){
var item = $(ele);
item.autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
item.val( ui.item.label );
return false;
},
select: function( event, ui ) {
item.val( ui.item.label );
item.attr('id',ui.item.value);
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.label + "</div>" )
.appendTo( ul );
};
});
}
refreshAuto(); // call to init once
} );
at "jQuery Multifield plugin" find '// Add section' add the line so:
// Add section
this.$elem.on('click',this.config.btnAdd,function(e){
e.preventDefault();
$this.cloneSection();
refreshAuto(); //call autocomplete new input
});
hope this help !

Need to do multiple search at a time with starting character which is search in autocomplete

I am use https://jqueryui.com/autocomplete/#multiple for autocomplete functionality in my site. Its work fine, Now I want to search record with first character that added to text box only.
Here is my code:
<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>
<link rel="stylesheet" href="/resources/demos/style.css"><input type="text" id="multi"><script>$(document).ready(function() {var avail = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
];
$("#single").autocomplete({
source:avail
});
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#multi" )
// 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(
avail, 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;
}
});});</script>

As per comments:
To make the typeahead.js multipel search demo searching "starting from first character", change matching code line from this:
~item.toLowerCase().indexOf(tquery.toLowerCase())
to this:
item.toLowerCase().indexOf(tquery.toLowerCase()) == 0
Demo fiddle: http://jsfiddle.net/BwDmM/1100/
Additional note: more explanation about how the original matching code works (tilda bitwise operator) can be found here: http://www.joezimjs.com/javascript/great-mystery-of-the-tilde/

Lazy initialization of jquery UI autocomplete

I'd like to lazy initialize the source options of a jQueryUI autocomplete. I'm aware of the possibility to pass a function to the source option, but I want to delay the initialization until the user really starts using the autocomplete.
I tried waiting for the search event and then set the source option, but this has no effect.
var availableTags = [
"ActionScript",
"AppleScript",
"Scheme"
];
$("#searchFirstTransactionStateInfo_searchPartnerId").autocomplete({
source : [],
minLength: 0,
search: function( event, ui ) {
$(event.target).source = availableTags;
}
});
How can I delay setting the source option until the user starts using the UI element?
Note: I used a fixed array for simplicity. Finally I want to call an AJAX function.

Well, if you use a function as the source parameter, and let that function perform a get request (ajax ofcourse), it will actually only start making requests when you've typed something. As an example, open up your network tab and start typing in this UI example:
http://jqueryui.com/autocomplete/#multiple-remote
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#birds" )
.autocomplete({
source: function( request, response ) {
$.getJSON( "search.php", {
term: extractLast( request.term )
}, response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function() {
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;
}
});
});

autocomplete with multiple values and automatic replace

I'm using autocomplete with multiple remote values.
Every search gives me only one word (words in input text are separated by space)
I removed return false; from focus function and now when I focus on autocomplete results it automaticly change the input text and when i return focus to input text it show the original text i wrote.
This is behaviour that i want, but the problem is when I search second word.
Then when the autocomplete search i focused it overwrites the first word in input text.
I want the first word stay the same and only second (3, 4 ..) word changes. And when I return to input text I get the original text I wrote before I focus the search result.
My code:
$(function() {
function split( val ) {
return val.split( / \s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#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({
source: function( request, response ) {
$.getJSON( "http://test.dev/search.php", {
term: extractLast( request.term ),
complete: request.term,
}, response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function(event, ui) {
},
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;
}
});
});

Javascript Autocomplete email's domain using jQuery UI

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;
}
});
});