I'm doing a autocomplete but when I write anything in the Input me appear all elements, I want items that contain the typed characters in the Input.
My code is:
var searchRequest = null;
$("#buscar").autocomplete({
maxLength: 5,
source: function (request, response) {
if (searchRequest !== null) {
searchRequest.abort();
}
searchRequest = $.ajax({
url: 'search.php',
method: 'post',
dataType: "json",
success: function (data) {
searchRequest = null;
response($.map(data.items, function (item) {
return {
value: item.name1,
label: item.name1
};
}));
}
}).fail(function () {
searchRequest = null;
});
}
});
Try this:
source: function(request, response) {
response($.map(data.items, function(item) {
var term = request.term.toLowerCase(),
name = item.name.toLowerCase();
if (name.search(term) == 0 || item.code.indexOf(term.toUpperCase()) == 0) {
return {
label: item.name,
value: item.name
};
}
}).slice(0, 15)
);
},
try this code*
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$("#txtSearch").autocomplete({
source: function(request,response) {
$.ajax({
url: "results.php",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response($.map(data, function (item) {
return { value:item.name, district:item.district , id: item.id
};
}))
}
})
},focus: function (event, ui) {
$("#txthid").val(ui.item.id);
$("#txtid").val(ui.item.district);
elements.autocompleteSearch.val(ui.item.name);
return false;
},
messages: {noResults: "", results: ""}
});
})
</script>
</head>
<body>
<form id="form1" runat="server" >
<div class="demo">
<div class="ui-widget">
<label for="txtSearch">Enter UserName: </label>
<input type="search" id="txtSearch" />
<label for="txtid">ID is: </label>
<input type="id" id="txtid" />
</div>
</form>
<form action="file2.html" method="LINK">
<input type="hidden" id="txthid" name="id">
<input type="submit" value="Home page" >
</form>
</body>
</html>
Related
For some reason I'm not getting the callback from post.php
Here is my index.php:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
<input type="file" name="file_upload">
<button type="submit" name="upload">Upload</button>
</form>
<div id=callbackEcho></div>
<script src="js/jquery.js"></script>
<script>
$("button").on("click",uploading);
function uploading(e)
{
e.preventDefault();
var postData=new FormData($("form")[0]);
$.ajax
(
{
type:'POST',
url:"post.php",
data:postData,
contentType:false,
processData:false,
success:function(data)
{
$("#callbackEcho").html('success : '+data);
},
fail:function(data)
{
$("#callbackEcho").html('fail : '+data);
},
done:function(data)
{
$("#callbackEcho").html('done : '+data);
}
}
);
}
</script>
</body>
</html>
and for testing only this is my post.php:
<?php
echo 'I\'m a callback!';
exit;
Change your ajax call to the following
$.ajax({
type:'POST',
url:"post.php",
data:postData,
contentType:false,
processData:false,
success:function(data) {
$("#callbackEcho").html('success : '+data);
},
error:function(data) {
$("#callbackEcho").html('fail : '+data);
},
complete: function(data) {
$("#callbackEcho").html('done : '+data);
}
});
in www.mpoo.org/organizatori/drugi.php have 2 select list, first time work but other no. This is very similar to this.
Second time Debugger say:
TypeError: $(...) is null
drugi.php:37
var country_id = $("select#drop1 option:selected").attr('value');
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Списак организатора</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
<!--
#import url("stil.css");
-->
</style>
</head>
<body>
<div id="body">
<div class="mhead"><h2>Списак организатора</h2></div>
<div id="dropdowns">
<div id="center" class="cascade">
<label>Одабери претрагу:
<select name="country" id = "drop1">
<option value=""> Одабери...</option>
<option value="Grad"> Град/Општина</option>
<option value="Zanimanje"> Занимање</option>
<option value="Struka"> Струка</option>
<option value="Organizator"> Организатор</option>
<option value="Svi"> Сви организатори</option>
</select>
</label>
</div>
<div class="cascade" id="state"></div>
</div>
<div id="city"> </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select#drop1").change(function(){
var country_id = $("select#drop1 option:selected").attr('value');
// alert(country_id);
$("#state").html( "" );
$("#city").html( "" );
if (country_id.length > 0 ) {
if (country_id=='Svi'){
$.ajax({
type: "POST",
url: "drugi4.php",
data: "country_id="+country_id,
cache: false,
beforeSend: function () {
$('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#state").html( html );
}
});
}
else {
$.ajax({
type: "POST",
url: "drugi2.php",
data: "country_id="+country_id,
cache: false,
beforeSend: function () {
$('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#state").html( html );
}
});
}
}
});
});
</script>
</body>
</html>
This is drugi2.php
<?php
include("connection.php");
//var_dump($_POST);
$state_id = trim(mysqli_escape_string($con, $_POST["country_id"]));
$sql="SELECT DISTINCT $state_id FROM jom_x1_organizatori ORDER BY $state_id";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
mysqli_set_charset($con, "utf8");
$query = mysqli_query($con, $sql);
?>
<label>
<select name="city" id = "drop2">
<option value="">Одабери...</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
<option value="<?php echo $rs[$state_id]; ?>"><?php echo $rs[$state_id]; ?></option>
<?php } ?>
</select>
</label>
<?php
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select#drop2").change(function(){
var state_id = $("select#drop2 option:selected").attr('value')+";"+$("select#drop1 option:selected").attr('value');
// alert(state_id);
if (state_id.length > 0 ) {
$.ajax({
type: "POST",
url: "drugi3.php",
data: "state_id="+state_id,
cache: false,
beforeSend: function () {
$('#city').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#city").html( html );
}
});
} else {
$("#city").html( "" );
}
});
});
</script>
I think after ajax loading its removing the selected option, therefore you should use:
var country_id = $("#drop1").val();
instead of
var country_id = $("select#drop1 option:selected").attr('value');
I have index page, in that i have 2 button "Staff Details" and "Student Detalis"
When i click "Staff Details" , the content of "staffDetails.php" should display in index.php
Similarly, "STudent details" also
Ajax Function:
function search1()
{ $.ajax({
Type:'GET',
url:'StaffDetails.php',
success:function(html)
{
document.getElementById("StaffDetails").innerHTML=html;
},
})
}
here is a complete ajax function use like this and help full for you in future
<!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>
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function search1(){
$.ajax({
type: "POST",
url:"StaffDetails.php",
beforeSend: function()
{
},
success: function(resp)
{
$("#StaffDetails").html(resp);
},
complete: function()
{
},
error: function(e)
{
alert('Error: ' + e);
}
});
}
function search2(){
$.ajax({
type: "POST",
url:"StudentDetails.php",
beforeSend: function()
{
},
success: function(resp)
{
$("#StudentDetails").html(resp);
},
complete: function()
{
},
error: function(e)
{
alert('Error: ' + e);
}
});
}
</script>
</head>
<body>
<input type="button" value="Staff Details" onclick="search1()" />
<input type="button" value="Student Details" onclick="search2()" />
<div id="StaffDetails">
</div>
<div id="StudentDetails">
</div>
</body>
here is full ajax working and tested example hope no question left now.
Thanks!
I am using jquery auto complete to get current data from database in php. But, I am not getting result.
Here is the code sample:
<label class="col-md-4">Referrer</label>
<div class="col-md-6">
<input type="text" name="referrer" id='referrer' placeholder="Type keyword..." autocomplete="off" value="" class="form-control" />
</div>
<script>
var path = $( "#referrer" ).data('path');
$("#referrer").autocomplete({
source: function(request, response) {
$.ajax({
url: "/ajax/ir_populate_referrer",
dataType: "json",
type: "POST",
data: {
keyword: request.term,
path: path
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.label
}
}));
}
})
}
});
</script>
As in my search.php file:
<?php
echo json_encode(array('label'=> $link, 'value' => $keyword));
?>
html
<html>
<head>
<title>test jquery autocomplete</title>
<script type="text/javascript" src="jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zipsearch").autocomplete({
source: function(req,res) {
$.ajax({
url: "json.php",
dataType: "json",
type: "GET",
data: {
term: req.term
},
success: function(data) {
res($.map(data, function(item) {
return {
label: item.label,
value: item.value
};
}));
},
error: function(xhr) {
alert(xhr.status + ' : ' + xhr.statusText);
}
});
}
});
});
</script>
<link rel="stylesheet" href="jquery/css/smoothness/jquery-ui-1.8.2.custom.css" />
<style type="text/css">
</style>
</head>
<body>
<form onsubmit="return false;">
Ejemplo<br/>
Enter a Zipcode:
<input id="zipsearch" type="text" />
</form>
</body>
</html>
PHP
<?php
$response = array();
$response[0]=array('label'=>'test','value'=>'test');
$response[1]=array('label'=>'test2','value'=>'test2');
echo json_encode($response);
?>
I'm using jQuery's .ajax() to post to a PHP file called process.php. Process.php has a lot of code in it, but for simplicity's sake, let's just say it contains <?php echo 'hello'; ?>.
Is this the proper jQuery to insert process.php's results into div.results? :
$.get('process.php', function(data) {
$('.results').html(data);
});
So far it doesn't seem to be working.
Here's the HTML/Javascript file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form#form").submit(function() {
var username = $('#username').attr('value');
$.ajax({
type: 'POST',
url: 'process.php',
data: 'username=' + username,
success: function() {
$('form#form').hide(function() {
$.get('process.php', function(data) {
$('.results').html(data);
});
});
}
});
return false;
});
});
</script>
</head>
<body id="body">
<form id="form" method="post">
<p>Your username: <input type="text" value="" name="username" id="username" /></p>
<input type="submit" id="submit" value="Submit" />
</form>
<div class="results"></div>
</body>
</html>
Here's process.php (greatly simplified):
<?php
/* get info from ajax post */
$username = htmlspecialchars(trim($_POST['username']));
echo $username;
?>
If you simply want to place the resulting string back into an element, use load().
$('.results').load('process.php');
However, looking at your code...
$.ajax({
type: 'POST',
url: 'process.php',
data: 'username=' + username,
success: function() {
$('form#form').hide(function() {
$.get('process.php', function(data) {
$('.results').html(data);
});
});
}
});
...shows you have misunderstood something. The correct anonymous function to assign to the success callback would be...
function(data) {
$('form#form').hide()
$('.results').html(data);
}
You could try something like this.
function ajax_login() {
if ($("#username").val()) {
$.post("/process.php", { username : $("#username").val() }, function(data) {
if (data.length) {
$("#login_form").hide();
$("#login_result").html(data);
}
})
} else {
$("#login_result").hide();
}
Then in process.php just echo out some text if the post sucesses.
process.php =>
if (isset($_POST['username'])
{
echo 'hello '.$_POST['username'];
}