we have using jquery cdn path for css and js files.
suppose you need more infomartion please go to this link http://jqueryui.com/autocomplete/
we are special thanks To Jquery. visit http://www.jquery.com/
suppose you need more infomartion please go to this link http://jqueryui.com/autocomplete/
we are special thanks To Jquery. visit http://www.jquery.com/
Run : http://localhost/jquery_autocomplete.php
After Searching :
After Searching :
Create Two php Files:
First File Name
: jquery_autocomplete.php
Put Below
Content and save.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Jquery Auto Complete</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.2/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.2/jquery-ui.js"></script>
<script>
$(function(){
var eventnames =
[{"value":"D98D3924-A88E-48EE-9EC4-A909CAD99FC8","label":"Event
Test1 -
EVC1","desc":"EVC1"},{"value":"0F22BEC9-872A-4F9F-BF73-483666EFE972","label":"Event
Test1 -
EVC2","desc":"EVC2"},{"value":"6EAA04AF-015E-471A-897E-7C618BE280D2","label":"IPL
15-2013 -
EVC3","desc":"EVC3"},{"value":"2F5AF158-A559-482E-A649-08A94B1F6AEE","label":"IPL
16 - EVC4","desc":"EVC4"}];
var check_url = "http://localhost/ajx_chk.php";
$( "#eventname" ).autocomplete({
minLength: 0,
source:
eventnames,
focus: function( event, ui ) {
$(
"#eventname" ).val( ui.item.label );
return
false;
},
select: function( event, ui ) {
$(
"#eventname" ).val( ui.item.label );
$(
"#eventid" ).val( ui.item.value );
$(
"#eventcode" ).val( ui.item.desc );
var
eid = $( "#eventid" ).val();
var
ecode = $( "#eventcode" ).val();
var
data_v = "eid="+eid+"&ecode="+ecode;
$.ajax({
type:"POST"
,
url:check_url
,
data:data_v
,
async:false
,
success:
function(html_v)
{
$("#ajx_cnt").html(html_v);
}
});
return false;
}
}).data(
"ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" +
item.label+"</a>" )
.appendTo( ul );
};
$("form#formtt").submit(function ()
{ return false; });
});
</script>
</head>
<body>
<form
method="post" action="" name="frm1"
id="formtt">
<input
type="text"
id="eventname" value="" name="eventname"
class="txt_f">
<input
type="hidden"
id="eventcode" value="" name="eventcode"
>
<input
type="hidden"
id="eventid" value="" name="eventid" >
</form>
<div
id="ajx_cnt">
</div>
</body>
</html>
Create Another One
file
File Name:
ajx_chk.php
Put Below
Content and save.
<p>Test Sample</p>
<?php
echo "<pre>";
print_r($_POST);
echo
"</pre>";
?>
No comments:
Post a Comment