JQuery Ajax Auto complete

Mar 2, 2016 2:06 am

Home

JQuery plugin to make a simple textbox an autocomplete, it fetches values from database via ajax. don’t worry it will be doing every thing automatically, you will need to code as minimum as possible.

download it from github and follow index.php how to include required files and how to call plugin.

You will need to create php file or any other server side file to entertain ajax request and return JSON or html list of values.

Live Demo
Download

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax dropdown</title>
<link rel="stylesheet" type="text/css" href="alam-ajax.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="alamajax.js"></script>
<script>
	$(function(){
		$(".txt").ajaxDropdown({
			//php or any other file which return data
			source:'alam-ajax.php',
			
			//field name to be filtered, where title=$(this).val()
			filterBy:'title',
			
			//if php file is returning ul as html(li must have data-id attribute with id)
			htmlOptions:false,
			
			//if php file is returning json object, specify value: the field with id/key/index and text:field name to display
			jsonOptions 	:	{
					value 	: 	'id',
					text	: 	'title',
				},
		});	
	});
</script>

</head>
<body>

    <input type="text" class="form-control ajax-input txt" name="countries" />
    
    <input type="text" class="form-control ajax-input txt" name="countries" />
    
</body>
</html>

<!doctype html>

<html>

<head>

<title>Ajax dropdown</title>

$(function(){

$(".txt").ajaxDropdown({

//php or any other file which return data

source:'alam-ajax.php',

//field name to be filtered, where title=$(this).val()

filterBy:'title',

//if php file is returning ul as html(li must have data-id attribute with id)

htmlOptions:false,

//if php file is returning json object, specify value: the field with id/key/index and text:field name to display

jsonOptions : {

value : 'id',

text : 'title',

});

</script>

</head>

<body>

</body>

</html>

Comments

mati says:

March 9, 2016 at 4:27 pm

it is very help full thanks

Reply

JQuery Ajax Auto complete

Comments

Write a Reply or Comment Cancel reply

About Author

Recent Posts

Archives

Categories

Search by tags

Recent Comments

Visitors

JQuery Ajax Auto complete

Related Posts

Discounted hostings

Comments

Write a Reply or Comment Cancel reply

About Author

Recent Posts

Archives

Categories

Search by tags

Recent Comments

Visitors