We Keep Coding

java script load issue with ng build --prod

my javascript file for multiple email(multiple_emails.js plugin) is working fine with ng serve my code :
(function( $ ){
$.fn.multiple_emails = function(options) {
// Default options
var defaults = {
checkDupEmail: true,
theme: "Bootstrap",
position: "top",
invalid:"Invalid Email Id"
};
// Merge send options with defaults
var settings = $.extend( {}, defaults, options );
var deleteIconHTML = "";
if (settings.theme.toLowerCase() == "Bootstrap".toLowerCase())
{
deleteIconHTML = '<span class="glyphicon glyphicon-remove"></span>';
}
else if (settings.theme.toLowerCase() == "SemanticUI".toLowerCase() || settings.theme.toLowerCase() == "Semantic-UI".toLowerCase() || settings.theme.toLowerCase() == "Semantic UI".toLowerCase()) {
deleteIconHTML = '<i class="remove icon"></i>';
}
else if (settings.theme.toLowerCase() == "Basic".toLowerCase()) {
//Default which you should use if you don't use Bootstrap, SemanticUI, or other CSS frameworks
deleteIconHTML = '<i class="basicdeleteicon">Remove</i>';
}
return this.each(function() {
var to_id = this.id;
var orig_id=to_id;
console.log(to_id);
var arr = to_id.split('_');
to_id = arr[1];
console.log("to_id",to_id);
setTimeout(function(){
console.log($('.licls'+to_id).length);
if($('.licls'+to_id).length > 4){
$('#input_'+to_id).css('display','none');
}else {
$('#input_'+to_id).css('display','block');
}
},200);
//$orig refers to the input HTML node
var $orig = $(this);
var $list = $('<ul class="multiple_emails-ul" id=ul_'+to_id+' />'); // create html elements - list of email addresses as unordered list
console.log($(this).val());
if ($(this).val() != '' && IsJsonString($(this).val())) {
$.each(jQuery.parseJSON($(this).val()), function( index, val ) {
$list.append($('<li class="multiple_emails-email licls'+to_id+'"><span class="email_name" data-email="' + val.toLowerCase() + '">' + val + '</span></li>')
.prepend($(deleteIconHTML)
.click(function(e) { $(this).parent().remove(); refresh_emails(); e.preventDefault(); })
)
);
});
}
var $input = $('<input type="text" class="multiple_emails-input text-left" id= input_'+to_id+' />').on('keyup', function(e) { // input
console.log($(this).attr('id'));
$(this).removeClass('multiple_emails-error');
$('#'+orig_id).parent().find("label").remove();
var input_length = $(this).val().length;
var keynum;
if(window.event){ // IE
keynum = e.keyCode;
}
else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
//if(event.which == 8 && input_length == 0) { $list.find('li').last().remove(); } //Removes last item on backspace with no input
// Supported key press is tab, enter, space or comma, there is no support for semi-colon since the keyCode differs in various browsers
if(keynum == 9 || keynum == 32 || keynum == 188) {
display_email($(this), settings.checkDupEmail);
}
else if (keynum == 13) {
if($('.licls'+to_id).length > 4){
$('#input_'+to_id).css('display','none');
}else {
$('#input_'+to_id).css('display','block');
}
display_email($(this), settings.checkDupEmail);
//Prevents enter key default
//This is to prevent the form from submitting with the submit button
//when you press enter in the email textbox
e.preventDefault();
}
}).on('blur', function(event){
if($('.licls'+to_id).length > 4){
$('#input_'+to_id).css('display','none');
}else {
$('#input_'+to_id).css('display','block');
}
$('#'+orig_id).parent().find("label").remove();
if ($(this).val() != '') { display_email($(this), settings.checkDupEmail); }
});
var $container = $('<div class="multiple_emails-container contnr_'+to_id+'" />').click(function() { $input.focus(); } ); // container div
// insert elements into DOM
if (settings.position.toLowerCase() === "top")
$container.append($list).append($input).insertAfter($(this));
else
$container.append($input).append($list).insertBefore($(this));
/*
t is the text input device.
Value of the input could be a long line of copy-pasted emails, not just a single email.
As such, the string is tokenized, with each token validated individually.
If the dupEmailCheck variable is set to true, scans for duplicate emails, and invalidates input if found.
Otherwise allows emails to have duplicated values if false.
*/
function display_email(t, dupEmailCheck) {
console.log(t.attr('id'));
//Remove space, comma and semi-colon from beginning and end of string
//Does not remove inside the string as the email will need to be tokenized using space, comma and semi-colon
var arr = t.val().trim().replace(/^,|,$/g , '').replace(/^;|;$/g , '');
//Remove the double quote
arr = arr.replace(/"/g,"");
//Split the string into an array, with the space, comma, and semi-colon as the separator
arr = arr.split(/[\s,;]+/);
var errorEmails = new Array(); //New array to contain the errors
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
for (var i = 0; i < arr.length; i++) {
var res_arr=JSON.parse($orig.val().toLowerCase().split(','))
//Check if the email is already added, only if dupEmailCheck is set to true
if ( dupEmailCheck === true && res_arr.indexOf(arr[i].toLowerCase()) != -1) {
if (arr[i] && arr[i].length > 0) {
new function () {
var existingElement = $list.find('.email_name[data-email=' + arr[i].toLowerCase().replace('.', '\\.').replace('#', '\\#') + ']');
existingElement.css('font-weight', 'bold');
setTimeout(function() { existingElement.css('font-weight', ''); }, 1500);
}(); // Use a IIFE function to create a new scope so existingElement won't be overriden
}
}
else if ( pattern.test(arr[i]) == true && res_arr.indexOf(arr[i].toLowerCase()) == -1) {
if($('#ulcls'+t.attr('id')).length < 4) {
$list.append($('<li class="multiple_emails-email licls'+to_id+'"><span class="email_name" data-email="' + arr[i].toLowerCase() + '">' + arr[i] + '</span></li>')
.prepend($(deleteIconHTML)
.click(function(e) { $(this).parent().remove(); refresh_emails(); e.preventDefault(); })
)
);
}
}
else
errorEmails.push(arr[i]);
}
// If erroneous emails found, or if duplicate email found
if(errorEmails.length > 0) {
t.val(errorEmails.join("; ")).addClass('multiple_emails-error');
t.after('<label for='+orig_id+' style="color:#cc5965;">'+settings.invalid+'</label>');
}else {
$('#'+orig_id).parent().find("label").remove();
t.val("");
}
refresh_emails ();
}
function refresh_emails () {
var emails = new Array();
var container = $orig.siblings('.multiple_emails-container');
container.find('.multiple_emails-email span.email_name').each(function() { emails.push($(this).html()); });
$orig.val(JSON.stringify(emails)).trigger('change');
if($('.licls'+to_id).length > 4){
$('#input_'+to_id).css('display','none');
}else {
$('#input_'+to_id).css('display','block');
}
}
function IsJsonString(str) {
try { JSON.parse(str); }
catch (e) { return false; }
return true;
}
$(document).ready(function(){
$('#input_'+to_id).on("cut copy paste",function(e) {
e.preventDefault();
});
});
return $(this).hide();
});
};
})(jQuery);
But when i compile it with ng build --prod it's gives TypeError: $(...).multiple_emails is not a function , if it's not working correctly any other tool to convert from JavaScript to typescript ?
i had convert js into typesript using online compiler but nothing happened.

solved!!!!
finally i figure out the problem. it is in angular-cli.json.when i place my multiple_email.js after jquery-3.1.1.min.js,jquery.validate.min.js then it works like charm...!!! #rajesh thanks

i cant hide jquery autocomplete with my functions

I am creating project which it searches musics dynamicly with JSON.
Here is my html:
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" placeholder="Search query..." id="searchquery" autocomplete="off" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button" id="searchbuttonheader" onclick="search();">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
My search function called search(); ... Before I integrated jquery autocomplete I made when I click ENTER on keyboard in searchquery input it executes search(); function. To do this here is my JS code:
// ENTER KEY SEARCH //
$.fn.enterKey = function (fnc) {return this.each(function () {$(this).keypress(function (ev) {
var keycode = (ev.keyCode ? ev.keyCode : ev.which);
if (keycode == '13') {search();}})})
}
$("#searchquery").enterKey(function () {search();});
// ENTER KEY SEARCH //
OKAY ITS WORKING... BUT...
After integration the jquery autocomplete when I type something in searchquery input it gives some autocomplete data. Here is JS:
$('#searchquery').autoComplete({
minChars: 1,
delay: 500,
source: function(term, response){
$.getJSON('<?php echo $url_autocomplete; ?>', { query: term }, function(data){ response(data); });
},
onSelect: function(e, term, item){
search();
//alert('Item selected by '+(e.type == 'keydown' ? 'pressing enter' : 'mouse click')+'.');
}
});
When I click one of them the autocomplete hides and searches the text. But when I don't select any of them and hit enter it searches but the autocomplete is not hiding.
I WANT:
When I type something in searchquery input then I hit enter hide autocomplete suggestions and make search();.

You are not using jquery-ui-autocomplete but you use jQuery-autoComplete from Pixabay am I right? Ok, after see the code, there's no close method provided, so i add one to the original source code. You can copy and use below's jquery.auto-complete.js and call $("#searchquery").autoComplete('close'); to close the suggestion. See below example how to use it :
$("#searchquery").enterKey(function (e) {
$("#searchquery").autoComplete('close');
// .. DO YOUR SEARCH HERE ..
});
Use below's modified jquery.auto-complete.js.
/*
jQuery autoComplete v1.0.7
Copyright (c) 2014 Simon Steinberger / Pixabay
GitHub: https://github.com/Pixabay/jQuery-autoComplete
License: http://www.opensource.org/licenses/mit-license.php
*/
(function($){
$.fn.autoComplete = function(options){
var o = $.extend({}, $.fn.autoComplete.defaults, options);
// public methods
if (typeof options == 'string') {
this.each(function(){
var that = $(this);
if (options == 'destroy') {
$(window).off('resize.autocomplete', that.updateSC);
that.off('blur.autocomplete focus.autocomplete keydown.autocomplete keyup.autocomplete');
if (that.data('autocomplete'))
that.attr('autocomplete', that.data('autocomplete'));
else
that.removeAttr('autocomplete');
$(that.data('sc')).remove();
that.removeData('sc').removeData('autocomplete');
} else if (options == 'close') {
// Add new method to close the suggestion box
$(that.data('sc')).hide();
}
});
return this;
}
return this.each(function(){
var that = $(this);
// sc = 'suggestions container'
that.sc = $('<div class="autocomplete-suggestions '+o.menuClass+'"></div>');
that.data('sc', that.sc).data('autocomplete', that.attr('autocomplete'));
that.attr('autocomplete', 'off');
that.cache = {};
that.last_val = '';
that.updateSC = function(resize, next){
that.sc.css({
top: that.offset().top + that.outerHeight(),
left: that.offset().left,
width: that.outerWidth()
});
if (!resize) {
that.sc.show();
if (!that.sc.maxHeight) that.sc.maxHeight = parseInt(that.sc.css('max-height'));
if (!that.sc.suggestionHeight) that.sc.suggestionHeight = $('.autocomplete-suggestion', that.sc).first().outerHeight();
if (that.sc.suggestionHeight)
if (!next) that.sc.scrollTop(0);
else {
var scrTop = that.sc.scrollTop(), selTop = next.offset().top - that.sc.offset().top;
if (selTop + that.sc.suggestionHeight - that.sc.maxHeight > 0)
that.sc.scrollTop(selTop + that.sc.suggestionHeight + scrTop - that.sc.maxHeight);
else if (selTop < 0)
that.sc.scrollTop(selTop + scrTop);
}
}
}
$(window).on('resize.autocomplete', that.updateSC);
that.sc.appendTo('body');
that.sc.on('mouseleave', '.autocomplete-suggestion', function (){
$('.autocomplete-suggestion.selected').removeClass('selected');
});
that.sc.on('mouseenter', '.autocomplete-suggestion', function (){
$('.autocomplete-suggestion.selected').removeClass('selected');
$(this).addClass('selected');
});
that.sc.on('mousedown', '.autocomplete-suggestion', function (e){
var item = $(this), v = item.data('val');
if (v || item.hasClass('autocomplete-suggestion')) { // else outside click
that.val(v);
o.onSelect(e, v, item);
that.sc.hide();
}
return false;
});
that.on('blur.autocomplete', function(){
try { over_sb = $('.autocomplete-suggestions:hover').length; } catch(e){ over_sb = 0; } // IE7 fix :hover
if (!over_sb) {
that.last_val = that.val();
that.sc.hide();
setTimeout(function(){ that.sc.hide(); }, 350); // hide suggestions on fast input
} else if (!that.is(':focus')) setTimeout(function(){ that.focus(); }, 20);
});
if (!o.minChars) that.on('focus.autocomplete', function(){ that.last_val = '\n'; that.trigger('keyup.autocomplete'); });
function suggest(data){
var val = that.val();
that.cache[val] = data;
if (data.length && val.length >= o.minChars) {
var s = '';
for (var i=0;i<data.length;i++) s += o.renderItem(data[i], val);
that.sc.html(s);
that.updateSC(0);
}
else
that.sc.hide();
}
that.on('keydown.autocomplete', function(e){
// down (40), up (38)
if ((e.which == 40 || e.which == 38) && that.sc.html()) {
var next, sel = $('.autocomplete-suggestion.selected', that.sc);
if (!sel.length) {
next = (e.which == 40) ? $('.autocomplete-suggestion', that.sc).first() : $('.autocomplete-suggestion', that.sc).last();
that.val(next.addClass('selected').data('val'));
} else {
next = (e.which == 40) ? sel.next('.autocomplete-suggestion') : sel.prev('.autocomplete-suggestion');
if (next.length) { sel.removeClass('selected'); that.val(next.addClass('selected').data('val')); }
else { sel.removeClass('selected'); that.val(that.last_val); next = 0; }
}
that.updateSC(0, next);
return false;
}
// esc
else if (e.which == 27) that.val(that.last_val).sc.hide();
// enter or tab
else if (e.which == 13 || e.which == 9) {
var sel = $('.autocomplete-suggestion.selected', that.sc);
if (sel.length && that.sc.is(':visible')) { o.onSelect(e, sel.data('val'), sel); setTimeout(function(){ that.sc.hide(); }, 20); }
}
});
that.on('keyup.autocomplete', function(e){
if (!~$.inArray(e.which, [13, 27, 35, 36, 37, 38, 39, 40])) {
var val = that.val();
if (val.length >= o.minChars) {
if (val != that.last_val) {
that.last_val = val;
clearTimeout(that.timer);
if (o.cache) {
if (val in that.cache) { suggest(that.cache[val]); return; }
// no requests if previous suggestions were empty
for (var i=1; i<val.length-o.minChars; i++) {
var part = val.slice(0, val.length-i);
if (part in that.cache && !that.cache[part].length) { suggest([]); return; }
}
}
that.timer = setTimeout(function(){ o.source(val, suggest) }, o.delay);
}
} else {
that.last_val = val;
that.sc.hide();
}
}
});
});
}
$.fn.autoComplete.defaults = {
source: 0,
minChars: 3,
delay: 150,
cache: 1,
menuClass: '',
renderItem: function (item, search){
// escape special characters
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
},
onSelect: function(e, term, item){}
};
}(jQuery));

Redirection don't work due to javascript function

In my project, I use a dropdown menu to redirect to different places according to the selection. Here is my code.
<div class="dropdown">
<div class="color-4">
<div class="container">
<section>
<label class="select-label">Duration</label>
<select onchange="window.location.href=this.value" class="cs-select cs-skin-slide">
<option value="http://127.0.0.1:9763/Kampana-Web/chart/acceleration/24" data-class="icon-camera">24 Hours</option>
<option value="http://127.0.0.1:9763/Kampana-Web/chart/acceleration/7" data-class="icon-camera">Last week</option>
<option value="http://127.0.0.1:9763/Kampana-Web/chart/acceleration/30" data-class="icon-camera">Last Month</option>
<option value="http://127.0.0.1:9763/Kampana-Web/chart/acceleration/90" data-class="icon-camera">Last 3 Months</option>
</select>
</section>
</div>
</div>
</div>
<script>
(function() {
[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
new SelectFx(el);
} );
})();
</script>
The issue is, redirection do not work with this javascript function. This function is must need one to maintain the functionality and all css support in dropdown menu.
How can I enable redirection with this javascript function?
Here is SelectFx code
( function( window ) {
'use strict';
/**
* based on from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js
*/
function hasParent( e, p ) {
if (!e) return false;
var el = e.target||e.srcElement||e||false;
while (el && el != p) {
el = el.parentNode||false;
}
return (el!==false);
};
/**
* extend obj function
*/
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
/**
* SelectFx function
*/
function SelectFx( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
/**
* SelectFx options
*/
SelectFx.prototype.options = {
// if true all the links will open in a new tab.
// if we want to be redirected when we click an option, we need to define a data-link attr on the option of the native select element
newTab : true,
// when opening the select element, the default placeholder (if any) is shown
stickyPlaceholder : true,
// callback when changing the value
onChange : function( val ) { return false; }
}
/**
* init function
* initialize and cache some vars
*/
SelectFx.prototype._init = function() {
// check if we are using a placeholder for the native select box
// we assume the placeholder is disabled and selected by default
var selectedOpt = this.el.querySelector( 'option[selected]' );
this.hasDefaultPlaceholder = selectedOpt && selectedOpt.disabled;
// get selected option (either the first option with attr selected or just the first option)
this.selectedOpt = selectedOpt || this.el.querySelector( 'option' );
// create structure
this._createSelectEl();
// all options
this.selOpts = [].slice.call( this.selEl.querySelectorAll( 'li[data-option]' ) );
// total options
this.selOptsCount = this.selOpts.length;
// current index
this.current = this.selOpts.indexOf( this.selEl.querySelector( 'li.cs-selected' ) ) || -1;
// placeholder elem
this.selPlaceholder = this.selEl.querySelector( 'span.cs-placeholder' );
// init events
this._initEvents();
}
/**
* creates the structure for the select element
*/
SelectFx.prototype._createSelectEl = function() {
var self = this, options = '', createOptionHTML = function(el) {
var optclass = '', classes = '', link = '';
if( el.selectedOpt && !this.foundSelected && !this.hasDefaultPlaceholder ) {
classes += 'cs-selected ';
this.foundSelected = true;
}
// extra classes
if( el.getAttribute( 'data-class' ) ) {
classes += el.getAttribute( 'data-class' );
}
// link options
if( el.getAttribute( 'data-link' ) ) {
link = 'data-link=' + el.getAttribute( 'data-link' );
}
if( classes !== '' ) {
optclass = 'class="' + classes + '" ';
}
return '<li ' + optclass + link + ' data-option data-value="' + el.value + '"><span>' + el.textContent + '</span></li>';
};
[].slice.call( this.el.children ).forEach( function(el) {
if( el.disabled ) { return; }
var tag = el.tagName.toLowerCase();
if( tag === 'option' ) {
options += createOptionHTML(el);
}
else if( tag === 'optgroup' ) {
options += '<li class="cs-optgroup"><span>' + el.label + '</span><ul>';
[].slice.call( el.children ).forEach( function(opt) {
options += createOptionHTML(opt);
} )
options += '</ul></li>';
}
} );
var opts_el = '<div class="cs-options"><ul>' + options + '</ul></div>';
this.selEl = document.createElement( 'div' );
this.selEl.className = this.el.className;
this.selEl.tabIndex = this.el.tabIndex;
this.selEl.innerHTML = '<span class="cs-placeholder">' + this.selectedOpt.textContent + '</span>' + opts_el;
this.el.parentNode.appendChild( this.selEl );
this.selEl.appendChild( this.el );
}
/**
* initialize the events
*/
SelectFx.prototype._initEvents = function() {
var self = this;
// open/close select
this.selPlaceholder.addEventListener( 'click', function() {
self._toggleSelect();
} );
// clicking the options
this.selOpts.forEach( function(opt, idx) {
opt.addEventListener( 'click', function() {
self.current = idx;
self._changeOption();
// close select elem
self._toggleSelect();
} );
} );
// close the select element if the target it´s not the select element or one of its descendants..
document.addEventListener( 'click', function(ev) {
var target = ev.target;
if( self._isOpen() && target !== self.selEl && !hasParent( target, self.selEl ) ) {
self._toggleSelect();
}
} );
// keyboard navigation events
this.selEl.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which;
switch (keyCode) {
// up key
case 38:
ev.preventDefault();
self._navigateOpts('prev');
break;
// down key
case 40:
ev.preventDefault();
self._navigateOpts('next');
break;
// space key
case 32:
ev.preventDefault();
if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
self._changeOption();
}
self._toggleSelect();
break;
// enter key
case 13:
ev.preventDefault();
if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
self._changeOption();
self._toggleSelect();
}
break;
// esc key
case 27:
ev.preventDefault();
if( self._isOpen() ) {
self._toggleSelect();
}
break;
}
} );
}
/**
* navigate with up/dpwn keys
*/
SelectFx.prototype._navigateOpts = function(dir) {
if( !this._isOpen() ) {
this._toggleSelect();
}
var tmpcurrent = typeof this.preSelCurrent != 'undefined' && this.preSelCurrent !== -1 ? this.preSelCurrent : this.current;
if( dir === 'prev' && tmpcurrent > 0 || dir === 'next' && tmpcurrent < this.selOptsCount - 1 ) {
// save pre selected current - if we click on option, or press enter, or press space this is going to be the index of the current option
this.preSelCurrent = dir === 'next' ? tmpcurrent + 1 : tmpcurrent - 1;
// remove focus class if any..
this._removeFocus();
// add class focus - track which option we are navigating
classie.add( this.selOpts[this.preSelCurrent], 'cs-focus' );
}
}
/**
* open/close select
* when opened show the default placeholder if any
*/
SelectFx.prototype._toggleSelect = function() {
// remove focus class if any..
this._removeFocus();
if( this._isOpen() ) {
if( this.current !== -1 ) {
// update placeholder text
this.selPlaceholder.textContent = this.selOpts[ this.current ].textContent;
}
classie.remove( this.selEl, 'cs-active' );
}
else {
if( this.hasDefaultPlaceholder && this.options.stickyPlaceholder ) {
// everytime we open we wanna see the default placeholder text
this.selPlaceholder.textContent = this.selectedOpt.textContent;
}
classie.add( this.selEl, 'cs-active' );
}
}
/**
* change option - the new value is set
*/
SelectFx.prototype._changeOption = function() {
// if pre selected current (if we navigate with the keyboard)...
if( typeof this.preSelCurrent != 'undefined' && this.preSelCurrent !== -1 ) {
this.current = this.preSelCurrent;
this.preSelCurrent = -1;
}
// current option
var opt = this.selOpts[ this.current ];
// update current selected value
this.selPlaceholder.textContent = opt.textContent;
// change native select element´s value
this.el.value = opt.getAttribute( 'data-value' );
// remove class cs-selected from old selected option and add it to current selected option
var oldOpt = this.selEl.querySelector( 'li.cs-selected' );
if( oldOpt ) {
classie.remove( oldOpt, 'cs-selected' );
}
classie.add( opt, 'cs-selected' );
// if there´s a link defined
if( opt.getAttribute( 'data-link' ) ) {
// open in new tab?
if( this.options.newTab ) {
window.open( opt.getAttribute( 'data-link' ), '_blank' );
}
else {
window.location = opt.getAttribute( 'data-link' );
}
}
// callback
this.options.onChange( this.el.value );
}
/**
* returns true if select element is opened
*/
SelectFx.prototype._isOpen = function(opt) {
return classie.has( this.selEl, 'cs-active' );
}
/**
* removes the focus class from the option
*/
SelectFx.prototype._removeFocus = function(opt) {
var focusEl = this.selEl.querySelector( 'li.cs-focus' )
if( focusEl ) {
classie.remove( focusEl, 'cs-focus' );
}
}
/**
* add to global namespace
*/
window.SelectFx = SelectFx;
} )( window );

As you are have tagged this question with jQuery you can simplify your existing code to the following:
$(function () { // Shortcut for $(document).ready(){...}
$('select.cs-select').each(function () {
new SelectFx(this);
});
});
Without info on SelectFx I afraid can't make you a working example, but hopefully this will help

KeyPress doesn't return false in IE8

Im trying to prevent user to enter a space " " with KeyPress() using jQuery. it's work fine on all browser except IE8.
Here is my code:
$("<input type='text'>")
.attr( 'placeholder', opts.addTagPrompt )
.keypress( function(e) {
var $this = $(this),
pressed = e.which;
for ( i in opts.delimiters ) {
if (pressed == opts.delimiters[i]) {
if($this.val().indexOf(";",0) > 0)
{
var list = $this.val().split(';');
}else{
var list = $this.val().split(',');
}
for(var i in list){
self.add( list[i] );
}
e.preventDefault();
return false;
}
}
})
Update 1:
it's a plugin for tagify if user click space or Enter or Comma it's should return false and chance Css for the selected input.
(function ($) {
$.widget("ui.tagify", {
options: {
delimiters: [13, 32, 44], // what user can type to complete a tag in char codes: [enter], [space], [comma]
outputDelimiter: ',', // delimiter for tags in original input field
cssClass: 'tagify-container', // CSS class to style the tagify div and tags, see stylesheet
addTagPrompt: 'enter an email address' // placeholder text
},
_create: function() {
var self = this,
el = self.element,
opts = self.options;
this.tags = [];
var ctrlDown = false;
// hide text field and replace with a div that contains it's own input field for entering tags
this.tagInput = $("<input type='text'>")
.attr( 'placeholder', opts.addTagPrompt )
.keypress( function(e) {
var $this = $(this),
pressed = e.which;
for ( i in opts.delimiters ) {
if (pressed == opts.delimiters[i]) {
if($this.val().indexOf(";",0) > 0)
{
var list = $this.val().split(';');
}else{
var list = $this.val().split(',');
}
for(var i in list){
self.add( list[i] );
}
e.preventDefault();
return false;
}
}
})
// Ctrl+V Detection
.keydown(function(e)
{
if (e.keyCode == 17) ctrlDown = true;
})
.keyup(function(e)
{
if (e.keyCode == 17) ctrlDown = false;
})
.keyup(function(e)
{
var $this = $(this);
console.log($this.val());
if (ctrlDown && (e.keyCode == 86) ) {
if($this.val().indexOf(";",0) > 0)
{
var list = $this.val().split(';');
}else{
var list = $this.val().split(',');
}
var name_fix = "";
for(var i in list){
console.log(list[i]);
if(!checkEmail(list[i])){
name_fix = list[i]+", ";
}else{
if (name_fix != "") {
self.add( name_fix+list[i] );
name_fix = "";
}else{
self.add( list[i] );
}
}
}
e.preventDefault();
return false;
}
})
.keydown( function(e) {
var $this = $(this),
pressed = e.which;
// if backspace is hit with no input, remove the last tag
if (pressed == 8) { // backspace
if ( $this.val() == "" )
{
self.remove();
return false;
}
return;
}
});
this.tagDiv = $("<div></div>")
.addClass( opts.cssClass )
.click( function() {
$(this).children('input').focus();
})
.append( this.tagInput )
.insertAfter( el.hide() );
// if the field isn't empty, parse the field for tags, and prepopulate existing tags
var initVal = $.trim( el.val() );
if ( initVal ) {
var initTags = initVal.split( opts.outputDelimiter );
$.each( initTags, function(i, tag) {
self.add( tag );
});
}
},
Any one know how to fix that ?? thanks in advance.

My autocompelete firing too many times

I am using the autocomplete here: http://blog.idealmind.com.br/geral/simple-autocomplete-jquery-plugin/
It has two problems:
1) It doesn't work the first time something is entered into textbox - not such a big problem, as you don't really want to match a single letter
2) The more irritating thing is that it fires too many times.
My javascript is here:
<script type="text/javascript">
function nameAutocomplete(field){
alert($(field).val());
$("#name").simpleAutoComplete(
'Ajax.action',
{ 'input': $(field).val(),
'_eventName': 'getObjectsByAjax'
},
function(data){
alert("we're in business");
}
);
}
</script>
The HTML looks like this:
<input type="text" name="name" id="name" size="45" class="medium-text" onkeyup="nameAutocomplete(this);"/>
This is the part of the plugin (below) that makes the Ajax call (which is working fine):
$.get(page,
{ 'input': thisElement.val(),
'_eventName': 'getObjectsByAjax'
},
function(res)
{
$('div.' + classAC).remove();
$("#autocomplete_tooltip").remove();
var r="";
var respObject=eval(res);
r+="<ul>";
for(var i in respObject)
{
r+='<li id="autocomplete_'+respObject[i].id+'"><table cellspacing=0 width="100%"><tr><td class="icon" width="20" uri="'+respObject[i].uri+'"></td><td class="caption">'+respObject[i].name+"</td></tr></table></li>";
}
r+="</ul>";
autoCompleteList = $('<div>').addClass(classAC).html(r);
I have printed the entire plugin code here:
(function($){
$.fn.extend(
{
simpleAutoComplete: function( page, options, callback ) {
if(typeof(page) == "undefined" ) {
alert("simpleAutoComplete: Você deve especificar a página que processará a consulta.");
}
var classAC = 'autocomplete';
var selClass = 'sel';
var attrCB = 'rel';
var thisElement = $(this);
$(":not(div." + classAC + ")").click(function(){
$("div." + classAC).remove();
$("#autocomplete_tooltip").remove();
});
thisElement.attr("autocomplete","off");
thisElement.keyup(function( ev )
{ var getOptions = { input: thisElement.val() }
if( typeof(options) == "object" )
{
classAC = typeof( options.autoCompleteClassName ) != "undefined" ? options.autoCompleteClassName : classAC;
selClass = typeof( options.selectedClassName ) != "undefined" ? options.selectedClassName : selClass;
attrCB = typeof( options.attrCallBack ) != "undefined" ? options.attrCallBack : attrCB;
if( typeof( options.identifier ) == "string" )
getOptions.identifier = options.identifier;
if( typeof( options.extraParamFromInput ) != "undefined" )
getOptions.extraParam = $( options.extraParamFromInput ).val();
}
kc = ( ( typeof( ev.charCode ) == 'undefined' || ev.charCode === 0 ) ? ev.keyCode : ev.charCode );
key = String.fromCharCode(kc);
console.log(kc, key, ev );
if (kc == 27)
{
$('div.' + classAC).remove();
$("#autocomplete_tooltip").remove();
}
if (kc == 13)
{
$('div.' + classAC + ' li.' + selClass).find(".caption").trigger('click');
}
if (key.match(/[a-zA-Z0-9_\- ]/) || kc == 8 || kc == 46)
{
$.get(page,
{ 'input': thisElement.val(),
'_eventName': 'getObjectsByAjax'
},
function(res)
{
$('div.' + classAC).remove();
$("#autocomplete_tooltip").remove();
var r="";
var respObject=eval(res);
r+="<ul>";
for(var i in respObject)
{
r+='<li id="autocomplete_'+respObject[i].id+'"><table cellspacing=0 width="100%"><tr><td class="icon" width="20" uri="'+respObject[i].uri+'"></td><td class="caption">'+respObject[i].name+"</td></tr></table></li>";
}
r+="</ul>";
autoCompleteList = $('<div>').addClass(classAC).html(r);
if (r != '')
{
autoCompleteList.insertAfter(thisElement);
var position = thisElement.position();
var height = thisElement.height();
var width = thisElement.width();
$('div.' + classAC).css({
'top': ( height + position.top + 6 ) + 'px',
'left': ( position.left )+'px',
'margin': '0px'
});
$('div.' + classAC + ' ul').css({
'margin-left': '0px'
});
$('div.' + classAC + ' li').each(function( n, el )
{
el = $(el);
el.mouseenter(function(){
$('div.' + classAC + ' li.' + selClass).removeClass(selClass);
$(this).addClass(selClass);
});
el.find(".caption").click(function()
{
thisElement.attr('value', el.text());
if( typeof( callback ) == "function" )
callback( el.attr(attrCB).split('_') );
$('div.' + classAC).remove();
thisElement.focus();
});
el.hover(function(e) {
urlText=$("<div>").attr("id","autocomplete_tooltip").addClass("tooltip").html($(this).find("td").attr("uri"));
urlText.css({
position:"absolute",
top:(e.pageY+20)+"px",
left:(e.pageX+20)+"px"
});
$("body").append(urlText);
},function() {
$("#autocomplete_tooltip").remove();
});
});
}
});
}
if (kc == 38 || kc == 40){
if ($('div.' + classAC + ' li.' + selClass).length == 0)
{
if (kc == 38)
{
$($('div.' + classAC + ' li')[$('div.' + classAC + ' li').length - 1]).addClass(selClass);
} else {
$($('div.' + classAC + ' li')[0]).addClass(selClass);
}
}
else
{
sel = false;
$('div.' + classAC + ' li').each(function(n, el)
{
el = $(el);
if ( !sel && el.hasClass(selClass) )
{
el.removeClass(selClass);
$($('div.' + classAC + ' li')[(kc == 38 ? (n - 1) : (n + 1))]).addClass(selClass);
sel = true;
}
});
}
}
if (thisElement.val() == '') {
$('div.' + classAC).remove();
$("#autocomplete_tooltip").remove();
}
});
}
});
})(jQuery);

Pull the part that does the ajax call into a function, and then "debounce" it like this:
var timeout = thisElement.data('timeout');
function debouncedAjax() {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(ajax, 500);
thisElement.data('timeout', timeout);
}
That way you'll be able to call debouncedAjax everywhere it now calls ajax and it will only do one call after a lull of 500ms. Adjust the timeout to taste.

I ended up using a global variable to store the setTimeout() with a call for the Ajax Function and every time a keyup happens you clear this variable and reset it with the new Ajax call, like this:
$(document).ready(function () {
// Define the global variable
$.go = null;
// Element keyup
$("#YourElementId").keyup(function() {
// Clear the global variable with the previous Ajax
clearTimeout($.go);
// Set the variable with the current Ajax call
$.go = setTimeout(function() {
FunctionThatCallsTheAjax();
},1000);
});
});
function FunctionThatCallsTheAjax(){
// Ajax Stuff Here
}
You can adjust the '1000' timeout.
It's working nice for me.