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
Related
I've been trying to learn how to build an autocomplete textbox that fetches the cities from my database, I use XAMPP so it's mySQL. Following is the code that I picked up from a tutorial and modified according to my needs:
demo.html
<html>
<head>
<title>Autocomplete demo</title>
<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() {
$( "#city" ).autocomplete({
source: 'search.php'
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="city">Region: </label>
<input id="city">
</div>
</body>
</html>
search.php
<?php
//database configuration
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'sample_master';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
//get search term
$searchTerm = $_GET['city'];
//get matched data from skills table
//"region" is the column from the table I wish to fetch
$query = $db->query("SELECT * FROM cities WHERE region LIKE '%".$searchTerm."%' ORDER BY region");
while ($row = $query->fetch_assoc()) {
$data[] = $row['region'];
}
//return json data
echo json_encode($data);
?>
In xampp I startup the MySQL and Apache server, and then open demo.html from htdocs. The autocomplete feature doesn't work(nothing shows up while I'm typing). What am I doing wrong? Also, the cities DB has excess of 3,00,000 records.
autocomplete default $_GET is $_GET['term'] ,you are called $_GET['city'] so you need to change your $_GET name or you can define your GET name like below..
$(function() {
$( "#city" ).autocomplete({
source: function(r,res){
$.get('search.php',{city:r.term},res,'json');//r is input typing request,res is response result as json
}
});
});
I am working on a search bar for my website which has an auto-suggest feature. I implemented this using php, ajax, jquery, and mysql.
Now I want that the result should be displayed as a link, so if user clicks on a result it will redirect the user to that page.
I also want the search result in this format:
My code is:
index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autocomplete textbox using jQuery, PHP and MySQL by CodexWorld</title>
<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() {
$( "#skills" ).autocomplete({
source: 'search.php'
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="skills">Skills: </label>
<input id="skills" autofocus="">
</div>
</body>
</html>
search.php
<?php
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'search_demo';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
//get search term
$searchTerm = $_GET['term'];
//get matched data from skills table
$query = $db->query("SELECT skill,category FROM skills WHERE skill LIKE '%".$searchTerm."%' ORDER BY skill ASC");
while ($row = $query->fetch_assoc()) {
$data[] = $row['skill'];
}
//return json data
$var = json_encode($data);
echo $var;
?>
My database has three fields id, skill, and category.
The current result is:
You have two options. First one is to extend the jqueryUI autocomplete widget, with the widgets factory. Second one is to create your own autocomplete script, which is in fact simple and is good for learning.
It's a chat application code in notepad++. My enter key is not working as it gives a new line always. I tried to find the problem but couldn't rectify it,
It will be of great help if someone can spot and rectify the problem?
?
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<link href="../Style/Style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="..Js/jquery.js"></script>
<title>Chat Application Home</title>
<script type="text/javascript">
$(document).ready(function(){
$("#ChatText").keyup(function(e){
//When We Press Enter Do
if(e.keyCode ==13){
var ChatText = $("#ChatText").val();
$.ajax({
type:'POST',
url:'InsertMessage.php',
data:{ChatText:ChatText},
success:function(){
$("#ChatText").val("");
}
});
}
});
});
</script>
</head>
<body>
<h2>Welcome <span style="color:green"><?php echo $_SESSION['UserName'];?></span></h2>
</br></br>
<div id="ChatBig">
<div id="ChatMesseges">
</div>
<textarea id="ChatText" name="ChatText"></textarea>
</div>
</body>
</html>
You have to cancel the default behaviour of the enter keypress event. Add this to your code:
$("#ChatText").keypress(function(e) {
if(e.keyCode ==13){
return false;
}
}
Note that this is a different event; leave the keyup handling as-is, or alternatively, change your code to respond to the keypress event instead of the keyup event, and add the return false; there. Both ways are fine.
You should prevent the default behaviour on key press. Use e.preventDefault() or return to do that, then run your code.
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.