I want to make one search box which display list of matched records from database related to which we have type in our box,
I have Use Jquery's Auto Complete.
That's OK, but I want to select records from my database Table instead manually give it in var availableTags.
I want to get records from DB in var availableTags in following code..
here is my code with Smarty Templates.....
My Html:(searchh.tpl)
{block name=head}
<title>Untitled Document</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>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
}
$(function() {
var availableTags = [
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
{/block}
{block name=body}
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
{/block}
My php :(searchh.php)
<?php
include("include/config.inc.php");
$pArray = 0;
$search = isset($_POST['search']) && ($_POST["search"] != "") ? $_POST['search']:'';
if($search != '')
{
$query="select * from party where partyName like '%$search%' ";
$result = mysql_query($query);
$pArray = array();
$n = 0;
while ($row = mysql_fetch_array($result))
{
$pArray[$n]['partyId'] = $row['partyId'];
$pArray[$n]['partyName'] = $row['partyName'];
$n++;
}
}
include("./bottom.php");
$smarty->assign("search",$search);
$smarty->assign("pArray",$pArray);
$smarty->display('searchh.tpl');
?>
If Anybody can help, It will very grateful to me.
Thanks..
change your url path like {$smarty.server.PHP_SELF | dirname}.balanceAj.php
and you use get method in ajax function and get data using post method.
If you use get method to send data (for get data $_GET[])
and Post method using (for get data $_post[])
You have not referenced your php file from the javascript. "remember to point to the exact location of the php file as in the example below"
`$( "#tags" ).autocomplete({
source: "/searchh.php"
});
Related
what I'm trying to do is get the value of the selected term from the autocomplete menu (ui.item.label), store it in a variable and send that value to my database. For that, I have another php file named "proceed.php", which connects us to the database and will insert the data into the table.
But I seem to be stuck at passing the variable "$selected" from look to proceed as no matter what I do, the browser displays $vari, that is, the variable passed here - proceed1.php?var=$vari
Backstory - You may notice that I have assigned the variable vari as apple. Yet, I see only $vari as the output on the browser and not apple.
Any help will be deeply appreciated.
Thank you very much.
look.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#route" ).autocomplete({
source: 'search.php',
select: function( event , ui ) {
$selected=ui.item.label;}
});
});
$vari="apple";
</script>
</head>
<link rel="stylesheet" type="text/css" href="look.css" media="screen" />
<body>
<div class="ui-widget">
<label for="route">Router Name: </label>
<input id="route">
<br><br><br>
Proceed
</div>
</body>
</html>
proceed.php
<?php
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'searchrouters';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
//get search term
$vari = $_GET['var'];
echo $vari;
?>
UPDATE :
Thank you, the solution provided in the comments worked. But now when I'm trying to get the variable selected's value as :
<?php
$vari=$_GET['selected'];
?>
and then pass it in to the next page as :
Proceed
I get the following error on the browser :
Undefined index: selected in C:\wamp\www\look.php on line 19
You need to modify you code in two places
<script>
$(function() {
$( "#route" ).autocomplete({
source: 'search.php',
select: function( event , ui ) {
$selected=ui.item.label;
$('#btn2').attr({'href':'proceed1.php?var='+$selected});
}
});
});
</script>
<?php
$vari="apple";
?>
and Proceed
and when you need to access the variable just use $_GET['var']
Where ever you want to user php with HTML you need to user the <?php php code here ?>
here is a demo
You can not declare php variable in jquery.
try this
<script>
$(function() {
$( "#route" ).autocomplete({
source: 'search.php',
select: function( event , ui ) {
$selected=ui.item.label;}
});
});
</script>
<?php
$vari="apple";
?>
and
Proceed
You should change here remove $vari="apple"; from script tag and use it inside php tag
<?php $vari="apple"; ?>
and get variable $vari like this
Proceed
i am trying to do google search from my page and the search is based on specific set of strings.
So the following code has a PHP array field with some values.
So if i need to use them when performing search ,how to do that,i tried to work on following code but it is not working.My code is here
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<?php $fieldArray=array('fruits','gold','pen');?>
<script>
function searchLink()
{
var link1 = document.getElementById("search").value;
window.location.href = 'https://www.google.co.in/?q='+link1;
}
$(function() {
var availableTags = <?php echo json_encode($fieldArray)?>
$( "#search" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<input type="text" name="search" id="search" style="width:400px;"/>
<input type="button" name="searchBtn" id="searchBtn" value="Search" onclick="searchLink()"/>
Add a sigh here The semicolon (;).
You was echo json but not terminate the line so its gives you
ERROR:-SyntaxError: missing ; before statement
var availableTags = <?php echo json_encode($fieldArray)?>;
I'm using the jQuery UI Autocomplete as helper in a form. When I try to use it to search from a list of available IPs it never filter the results, no matter the number of characters (numbers) I type it always returns the complete list.
How can I correct it?
I am using this code http://jqueryui.com/autocomplete/#remote-with-cache
The JSON generated from a PHP file is similiar to this (I have reduced the number of results):
["192.168.3.2","192.168.3.3","192.168.3.4","192.168.3.5","192.168.3.6","192.168.3.7","192.168.3.8","192.168.3.9","192.168.3.10"]
[Edit]
The form page code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Remote with caching</title>
<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>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
var cache = {};
$("#birds").autocomplete({
minLength: 2,
source: function(request, response) {
var term = request.term;
if (term in cache) {
response(cache[ term ]);
return;
}
$.getJSON("tab-ip-autocomplete.php", request, function(data, status, xhr) {
cache[ term ] = data;
response(data);
});
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" />
</div>
</body>
</html>
The PHP to JSON code:
<?php
include_once 'conn.php';
INET_NTOA(ipv4) LIKE :ipv4";
$autocomplete = "SELECT * FROM vteste;";
$STH = $DBH->prepare($autocomplete);
$STH->bindParam(':ipv4', $ipv4, PDO::PARAM_STR);
$STH->execute();
$STH->setFetchMode(PDO::FETCH_ASSOC);
$row = $STH->fetch();
/* gera json */
$arr = array();
while ($row = $STH->fetch()):
$arr[] = $row['ipv4'];
endwhile;
$json = json_encode($arr);
echo $json;
?>
When using a remote datasource, the jQueryUI AutoComplete doesn't filter your results - it is down to the script which provides the data to send over only matching results.
From the http://api.jqueryui.com/autocomplete/#option-source:
The Autocomplete plugin does not filter the results, instead a query
string is added with a term field, which the server-side script should
use for filtering the results. For example, if the source option is
set to "http://example.com" and the user types foo, a GET request
would be made to http://example.com?term=foo. The data itself can be
in the same format as the local data described above.
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%"");