Implement Jquery Auto Complete

Jquery Auto Complete

In this article we will show you how to use auto complete of jQuery. Auto complete widget provides suggestions while you type into the field. Here we are going to show you an example that how to implement auto complete and how we can customize it as per our requirement.

In the below example, we have 3 different objects in an array:
 
var data = [{
label: "Code",
value: "http://www.codehotfix.com"
},
{
label: "Hotfix",
value: "http://www.codehotfix.com"
},
{
label: "Code Hotfix",
value: "http://www.codehotfix.com"}
];
$(function () {
$("#idOfSearchTextBox").autocomplete({
source: function (request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(data, function (item) {
return matcher.test(item.label);
}));
},
select: function (event, ui) {
$("#idOfSearchTextBox").val(ui.item.label);
window.location.href = ui.item.value;
}
});
});

hotfix

Continue reading “Implement Jquery Auto Complete”

How to read JSON data from External File

In this article we will understand how we can read JSON data from a external file.JSON is short for JavaScript Object Notation, and is a way to store information in an organized, easy-to-access manner .One of the easiest ways to load JSON data into our web applications is to use jQuery.getJSON().For this we have to understand the term “jQuery.getJSON()” .

So what is significance of jquery.getJSON?????….

jQuery.getJSON()

It loads JSON data from the  server using GET HTTP request .

Picture1

Continue reading “How to read JSON data from External File”

JSON with Javascript and Jquery

JSJavascript has grown  from a way to add interactivity on your page , to a language that lets you perform tasks that once belonged to servers.JSON provides for an easy way to create and store data structures within JavaScript. JSON stands for JavaScript Object Notation…it’s called that because storing data with JSON creates a JavaScript object. The JavaScript object can be easily parsed and manipulated with JavaScript.

First, we create a variable to hold our data, and then we use JSON to define our object. Our sample object above is a simple as it gets. Just an item called firstName and it’s value Sam. When using strings with JSON, you should use them with quotations as above. If you use numbers, then you don’t have to use quotations.

<script> var data = { “Firstname”: “Sam” }; alert(data.Firstname); </script>

Let’s put data inside an HTML element.

<script>
var data = {
"Firstname": "Sam",
"Lastname": "Legend",
"Age": "34"
};

 document.getElementById("placeholder").innerHTML = data.Firstname + " " + data.Lastname + " " + data.Age;
</script>
  • Every object in json is stored with curly braces {}, an array is stored with brackets[].

  • So in order to organize our data, we created an object called users, which held an array (using brackets).

  • That object had a couple of other objects…each stored like before with curly braces {}.

  • Each element in that object was separated by commas.

<html>
<head>
<meta charset="utf-8" />
<title>JSON Data</title>
</head>
<body>
 <div id="placeholder"> </div>
</body>
</html>
<script>
var data = {
"users": [
{
"Firstname": "Sam",
"Lastname": "Legend",
"Age": "34"
},
{
"Firstname": "John",
"Lastname": "Watson",
"Age": "22"
}
]
};
 document.getElementById("placeholder").innerHTML = data.users[0].Firstname + " " + data.users[0].Lastname + " " + data.users[0].Age;
</script>


How to achieve multithreading in Java Script

Achieve Multithreading in Java Script

Alright, before we start let me admit that JavaScript is a single-threaded environment, JavaScript historically suffers from an important limitation that all its execution process remains inside a single thread.

On the web you may found the various ways to archive multi-threading but as far as I know, the only way is HTML5 Web Workers. You can simulate ‘concurrency’ by using techniques like setTimeout(),setInterval() and event handlers.

Yes, all of these features run asynchronously, but non-blocking doesn’t necessarily mean concurrency. Like setInterval() only schedule things to happen later, they don’t run concurrently with anything else. Before multithreading when executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

Multithreading using HTML5 Web Workers

Continue reading “How to achieve multithreading in Java Script”

Autocomplete Textbox Using Jquery/JSON from Database

JSONIn web page designing  autocomplete property of textbox is widely used for making the site user friendly and interactive , so in this article we will understand the simple method for autocompletion of textbox using Jquery.

First we will see a simple example for this then in next step I will show you how you can fetch the data from the database using JSON

HTML Code

<html>
<head>

<!-- Load jQuery, jQuery UI and jQuery ui styles from jQuery website -->
<<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>

var data = [
"Delhi",
"Mumbai",
"Indore",
"Dehradun",
"Assam"];
$(document).ready(
function () {
 $("#City").autocomplete({
source: data,
 autoFocus: true,
});
}
);
</script>
</head>

<body>

<label for="City">City <input type="text" name="CityNames" id="City" /></label>
</body>

</html>

Continue reading “Autocomplete Textbox Using Jquery/JSON from Database”

Export to excel table without hitting server using Jquery

Want to export the data to excel, but don’t  want to hit server again and again ?? So here is the simple way out for you.

In the following steps you will understand how simply we can export the data to excel sheet by using jquery.

Continue reading “Export to excel table without hitting server using Jquery”

Analyse JavaScript Code with JSLint

jslintlogoIn this article we will know how to analyse JavaScript with JSLint and why it is important but first we will start with what is JavaScript.

Java Script is a high level, untyped, and interpreted programming and most importantly its a dynamic programming language (term dynamic used for the those programming languages which, at runtime, execute many common programming behaviors rather than compile time). So that’s why you will never get compile time errors, and you will never get Type Safety with Java Script.

Continue reading “Analyse JavaScript Code with JSLint”

Identify and Remove unused CSS from Page

If you are working on a website using some templates which comes with the framework like Bootstrap or foundation or may be your website using Metro-UI CSS, then it might possible that you are not using all the properties/selector that are included the CSS file. And believe me guys this is BIG NO to just copy that file which includes several lines of code.

I had a same scenario in which I was working on a website that uses the website template. After development I noticed that my website is taking too much time to load. Then I looked into the Network and realized what I had done. The template CSS that I included is around 5000 lines of code, which is roughly 160Kb in file size. So when every time when my page loads, it takes time because browser has to download 160Kb file.

Continue reading “Identify and Remove unused CSS from Page”

JSON Basics for Beginners

JSONJSON Basics

In this article we will learn: 

  • What is JSON?
  • Benefits of using JSON
  • A simple demo for using JSON.

So lets start with  WHAT IS JSON?

JSON stands for Java Script Object Notation…It is called that because storing data with JSON creates Java Script object . This Java script object can easily be parsed with JavaScript .JSON is a data  interchange format. Data is represented in form of key/value pair . Continue reading “JSON Basics for Beginners”

Detect CAPS lock is ON using JavaScript

JSHow to detect CAPS lock is ON using JavaScript?

If you have a secure page which requires the credentials which obvious is a case-sensitive. So in case if user is typing password without aware of if CAPS LOCK is ON, which will cause invalid credentials error .To avoid its better to show message to the end user that “CAPS LOCK is ON” by detecting CAPS lock using JavaScript

Continue reading “Detect CAPS lock is ON using JavaScript”