i`m trying to make a auto complete text box in php.
here is my JavaScript code
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/jquery-1.3.2.min.js"></script>
<script src="assets/js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#search').autocomplete({
source : 'search-job.php',
minLength:2
});
});
</script>
here is my html code
<input type="text" id="search" class="form-control input-lg col-xs-4" name="search">
here is my search-job.php
<?php
include 'connectdb.php';
if(isset($_REQUEST['term']))
exit ();
$rs= mysql_query("select * from jobs where `title` like '%" . ucfirst($_REQUEST['term']). "%' ORDER BY id ASC LIMIT 0,10") or die(mysql_error());
$data= array();
while($row= mysql_fetch_assoc($rs,MYSQL_ASSOC)){
$data[]=array(
'label'=>$row['title'],
'value'=>$row['title']
);
}
echo json_encode($data);
flush();
i`m getting correct values in search-job.php. but it is not catching by html
but when i run code nothing happened? why is that?
this is how it`s looks on network tab
The array format you are passing is wrong.
$data[]=array(
'label'=>$row['title'],
'value'=>$row['title']
);
should be
$data[$row['title']]= >$row['title'];
OR simply
$data[]= >$row['title'];
and
replace
source : 'search-job.php',
with
source: 'search-job.php?term='+document.getElementById('search').value,
Related
I am working on a website where i want to do chained autocomplete using mysql database where i want to search the second text field using the first text field input
here is the html code:
<script type="text/javascript">
$(document).ready(function(){
$("#name").autocomplete({
source:'node_fetch.php',
minLength:1
});
});
</script>
</head>
<body>
<form method="post" action="">
Name : <input type="text" id="name" name="name" />
Name2 : <input type="text" id="name2" name="name2" />
</form>
and here is the php code:
<?php
include('config.inc');
$term=$_GET["term"];
$query=mysql_query("SELECT DISTINCT root1 FROM tree where root1 like '%".$term."%' order by root1 ASC");
$json=array();
while($student=mysql_fetch_array($query)){
$json[]=array(
'value'=> $student["root1"],
'label'=>$student["root1"]
);
}
echo json_encode($json);
?>
i want to autocomplete name2 from root2 using input selected in name1
any help? thanx in advance
Add select function in autocomplete options as below:
<script type="text/javascript">
$(document).ready(function(){
$("#name").autocomplete({
source:'node_fetch.php',
minLength:1,
select: function (event, ui) {
$("#name2").val(ui.item.label);
});
});
</script>
This will show selected item from autocomplete in the second text box.
Please mark as answered if that solve your problem.
I have been referring to Auto Complete Text Box using JQuery, PHP, MySQL
My page is split into various PHP Templates. Below is the code:
Header.php
<!-- JQuery AutoComplete CSS -->
<link href="../css/jquery.autocomplete.css" rel="stylesheet">
<!-- JQuery JS -->
<script type="text/javascript" src="../js/jquery.js"></script>
<!-- JQuery AutoComplete JS -->
<script type="text/javascript" src="../js/jquery.autocomplete.js"></script>
Main Page
This page exists inside http://localhost/booking/mainpage.php
<tr>
<td class="col-md-4"><label class="control-label">Pooja Name</label></td>
<td class="col-md-8"><input type="text" name="txtPoojaName" id="poojaName" class="form-control" placeholder="Enter Pooja Name"></td>
</tr>
I have included the script code in the Main Page at the very end before the ending of the body tag.
<script>
$(document).ready(function(){
$("#poojaName").autocomplete("autocomplete.php", {
selectFirst: true
});
});
</script>
autocomplete.php
This page exists inside http://localhost/booking/autocomplete.php
<?php
$q=$_GET['q'];
$my_data=mysql_real_escape_string($q);
$dbc=mysqli_connect('localhost','root','pass#1234','srkbs') or die("Database Error");
$sql="select distinct poojaname from v_poojadetails where poojaname like '%$my_data%' order by poojaname";
$result = mysqli_query($dbc,$sql) or die(mysqli_error());
//echo mysqli_num_rows($result);
if($result)
{
while($row=mysqli_fetch_array($result))
{
echo $row['PoojaName']."\n";
}
}
?>
I have tested the autocomplete.php separately and it returns the result set. I guess I am making some mistake in JQuery or some other place.
Please advice.
Just have a look in here: http://jqueryui.com/autocomplete/
$("#poojaName").autocomplete({
source: ["poojaOne","poojaTwo"."poojaThree"],
selectFirst: true
})
When you are populating your pooja list with autocomplete.php you should use Ajax to bring the list in and in your PHP file you are better off echoing out an array using json_encode. Have a look in here http://php.net/manual/en/function.json-encode.php to see how to encode a PHP array to JSON.
I have a problem with the plugin in jQuery it doesn't show me any results up. I dont where I made the mistake?
thats my newJob.php:
<form method="post" action="newJob.php">
<span>Customer Name:<input type="text" id="customerName" name="customerName"></span><br>
<input type="submit" name="submitJob" value="Create Job" >
</form>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript" src="../js/startDate.js"></script>
<script type="text/javascript">
$(function() {
//autocomplete
$("#customerName").autocomplete({
source: "searchCustomer.php",
minLength: 1
});
});
</script>
My searchCustomer.php:
<?php
include('classes.php');
$obj = new CompanyDatabase;
$obj->connect_db();
$obj->select_db();
if (isset($_POST['customerName'])) {
$query = $_POST['customerName'];
$sql = mysql_query ("SELECT `Customer Name` FROM `job` WHERE `Customer Name` LIKE \"%".$query."%\"");
$array = array();
while ($row = mysql_fetch_assoc($sql)) {
$array[] = $row['customerName'];
}
echo json_encode ($array); //Return the JSON Array
}
?>
Whats wrong with it? Thanks for your help!
I believe MySQL doesn't allow you columns and table names to have spaces beetween names. Are you sure you're using the correct column and table names?
I am a newbie to jQuery; I want to get the data from a database to auto-complete a text box.
I have coded the PHP to get the values from the database. How can I get these PHP values in a jQuery page?
This is the script:
<script>
$(function() {
var Theaters = [
"PVR",
"SCR",
"MTR"
];
$( "#tags" ).autocomplete({
source: Theaters
});
});
</script>
This is the PHP page:
<?php
mysql_connect("localhost", "root") or die (mysql_error ());
mysql_select_db("theaterdb") or die(mysql_error());
$strSQL = "SELECT * FROM theaters";
$rs = mysql_query($strSQL);
while($row = mysql_fetch_array($rs))
{
echo $row['theater_name'] . "<br />";
}
mysql_close();
?>
How can I do this?
Use ajax for this purpose.
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#radioid').click(function() {
$('#txtDoorStyle').val($(this).val());
});
});
</script>
</head>
<body>
<input type="radio" id="radioid" value="Door Half Transom (011)" name="doorstyle">
<input type="text" value="" id="txtDoorStyle" name="txtDoorStyle" >
</body>
</html>>
you have two choices either two load this autocomplete options upfront in which case you store the data that you have retrieved from the dB in a hidden field after serializing the data to a string and in your javascript you parse it back to an array using str.split(",")
or
you could make an ajax request when the user starts typing and then retrieve the data as a string and then parse it to an array and then pass it to the autoComplete api. You can read about jquery ajax here
while entering the data in the textfield on the browser, it should fetch the data from the database and display accordingly. (ex: like google).
Here is my php code:
<?php
mysql_connect("localhost","root","MobixMySQL") or die(mysql_error());
mysql_select_db("filter") or die(mysql_error());
$partialStates = $_POST['partialStates'];
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE "%$partialStates%"");
while($state = mysql_fetch_assoc($states)) {
echo "<div>".$state['name']."</div>";
}
?>
And below is my html code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function getStates(value){
$.post("getStates.php",{partialStates:value},function(data){
$("#results").html(data);
});
}
</script>
</head>
<body>
<input type="text" onKeyUp="getStates(this.value)" >
<div id="results"></div>
</body>
</html>
Pls suggest me where am wrong....!!!
Error with your quotes in the SQL...along with injection. Check out PDO for future development
$partialStates = mysql_real_escape_string($_POST['partialStates']);
$states = mysql_query("SELECT `name` FROM list1 WHERE `name` LIKE '%$partialStates%'");
EDIT
Since you're using jQuery trying changing your onkeyup event. If you are still getting errors use something like FireBug or your browsers javascript debugger to check for further errors. Try the following (untested):
<script type="text/javascript">
$(document).ready(function() {
$('input#myFilter').keyup(function(event) {
$.post("getStates.php",{partialStates:$(this).val()},function(data){
$("#results").html(data);
});
}).keydown(function(event) {
if (event.which == 13) {
event.preventDefault();
}
});
});
</script>
</head>
<body>
<input type="text" id="myFilter">
<div id="results"></div>
Try this
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE '%".mysql_real_escape_strings($partialStates)."%'");
Instead of this
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE "%$partialStates%"");