Gautam Singh Blog For Web Tutorials: November 2016

Sunday, November 27, 2016

Multiple JQuery Autocomplete With Selector

Multiple jquery autocomplete : example of multiple jquery autocomplete and also when select any element or hover on list description of hovered element will show and when we select the element its value will shown in lebel.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple JQuery Autocomplete with selector</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
$(function() {
var projects = [
{
value: "java",
label: "Java",
desc: "write once run anywhere",
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
},
{
value: "Bootstrap",
label: "Twitter Bootstrap",
desc: "popular front end frameworks ",
}
];
$("[id^=autocomplete_]").autocomplete({
source: projects,
focus: function( event, ui ) {
var idArr=$(this).attr('id').split('_');
$('#value_'+idArr[1]).text(ui.item.desc);
return false;
},
select: function( event, ui ) {
var idArr=$(this).attr('id').split('_');
$('#value_'+idArr[1]).text(ui.item.value);
return false;
}

});
});
</script>
</head>
<body>

<div class="ui-widget">
<p>Type J OR b</p>
<input id="autocomplete_1"><label id="value_1"></label><br>
<input id="autocomplete_2"><label id="value_2"></label><br>
<input id="autocomplete_3"><label id="value_3"></label><br>
<input id="autocomplete_4"><label id="value_4"></label><br>
<input id="autocomplete_5"><label id="value_5"></label><br
</div>
</body>
</html>

Monday, November 14, 2016

infinite load more data at page end

<!DOCTYPE html>
<html>
<head>
<title>Loading</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.loadedcontent {min-height: 800px; }
</style>
</head>
<body>
<input type="hidden" value="0" id="numCount"></input>
<div id="container">
<div style="border:1px solid" class="loadedcontent">old div</div>
</div>

</body>
</html>
<script type="text/javascript">
var processing;

$(document).ready(function(){
$(document).scroll(function(e){
if (processing){
return false;
}

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
processing = true;
var numCount=$("#numCount").val();
numCount++;
var data1='<div class="loadedcontent">new div'+numCount+'</div>';
//var sortData = $('#productsearchid').serialize();
//var sortData = {};
//sortData['category_name'] = 'electronics';
//$.ajax({
// url:"load_data.php",
// cache:false,
// type:'GET',
// data:sortData,
//success:function(data){
$('#container').append(data1);
$("#numCount").val(numCount)
processing = false;
//}
//});
}
});
});
</script>

Saturday, November 5, 2016

call js function when user stop typing

Many times we need instant result of whatever the change has been made. For calculation we define some function and do calculation there or for search we do ajax call. But for result we we call our function /ajax on every keyup event then what happen if i have to search a name "gautam" then then function calls 6 times as each keyup but 5 call is a waste as i am searching for "gautam" not for each character as typed.

In short we should call our function or ajax request when user stop typing not on each and every key up. For it we may guess when user type halts for a second or two second then his typing is finished and we can do whatever the result he wants.

<!DOCTYPE html>
<html>
<head>
<title>call js function when stop typing</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#in').keyup(function() {
s = $('#in').val();
setTimeout(function() {
if($('#in').val() == s){ // Check value is last typed or not.
// call ajax or any function or whaterver you wnat
var v = $("#in").val();
$("#out").html(v);
}
}, 1000); // 1 sec delay to check.
});
});

</script>
</head>
<body>
<input id="in" type="text"/>
<div id="out"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>call js function when stop typing</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
var typingTimer; //timer identifier
var doneTypingInterval = 1000; //time in ms, 5 second for example

//on keyup, start the countdown
$('document').ready(function(){
$('#in').keyup(function(){
clearTimeout(typingTimer);
if ($('#in').val) {
typingTimer = setTimeout(function(){
//do stuff here e.g ajax call etc....
var v = $("#in").val();
$("#out").html(v);
}, doneTypingInterval);
}
});
});

</script>
</head>
<body>
<input id="in" type="text"/>
<div id="out"></div>
</body>
</html>