I have here autocomplete from jquery.com. Instead of making a variable to show in autocomplete. I want to show autocomplete from database records. I want only show in autocomplete the records based on dropdown option value. How to do this? Please help me. I'm stuck in here.
This what I have here right now. But how to do this if the comparing value is from option value?
$(document).ready(function(){
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
});
});
Here's my autocomplete.php
<?php
$mysqli = new mysqli("localhost", "root", "", "2015") or die("Database Error");
$auto = $mysqli->real_escape_string($_GET["q"]);
$sql = $mysqli->query("SELECT * FROM code WHERE item LIKE '%$auto%' GROUP BY id ORDER BY item" );
if($sql)
{
while($row=mysqli_fetch_array($sql))
{
echo $row['item']."\n";
}
}
?>
Here's autocomplete code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<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>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<select id="main" name="main">
<option value="" disabled="disabled" selected="selected">Choose</option>
<?php echo $option; ?>
</select>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
HTML should be
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<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>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tags" ).autocomplete({
source: 'yourPHPFile.php?'
});
});
function changeAutoComplete (val) {
$( "#tags" ).autocomplete({
source: 'yourPHPFile.php?selected='+val
});
}
</script>
</head>
<body>
<select id="main" name="main" onchange="changeAutoCompete(this.value)">
<option value="" selected="selected">Choose</option>
<?php echo $option; ?>
</select>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
PHP should be like this.
<?php
$mysqli = new mysqli("localhost", "root", "", "2015") or die("Database Error");
$auto = $mysqli->real_escape_string($_GET["term"]);
$selected = $mysqli->real_escape_string($_GET["selected"]);
$sql = $mysqli->query("SELECT * FROM code WHERE item LIKE '%$auto%' AND selected='$selected' GROUP BY id ORDER BY item" );
if($sql)
{
$str = array();
while($row=mysqli_fetch_array($sql))
{
$str[] = $row['item'];
}
echo json_encode($str);
}
?>
This is easily accomplished with basic HTML.
<input list="languages">
<datalist id="languages">
<option value="Dutch">
<option value="English">
<option value="German">
<option value="Chinese">
<option value="Swedish">
</datalist>
Fiddle demo
Related
I'm trying to make a autocomplete with bootstrap, php and ajax.
My php code seems right here's the code:
<?php
$conn = pg_connect("host=y dbname=y user=y");
$data = array();
$keyword = strval($_POST['query']);
$search_param = "{$keyword}%";
$result = pg_query_params($conn, "select name from users_table where users_table.name like $1", array($search_param));
while($row = pg_fetch_row($result)) {array_push($data, $row[0]);}
echo json_encode($data);
$conn->close();
?>
And with a simple test making $search_param = '%S%'; this is my output from the php file:
["Steven","Sally","Sam","Susan"]
And this is my index.php file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">Autocomplete Textbox using Bootstrap Typeahead with Ajax PHP</h2>
<br /><br />
<label>Search Name</label>
<input type="text" name="name" id="name" class="form-control input-lg" autocomplete="off" placeholder="Type Name" />
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#name').typeahead({
source: function(query, result)
{
$.ajax({
url:"autoComplete.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data)
{
result($.map(data, function(item){
return item;
}));
}
})
}
});
});
</script>
I followed this tutorial http://www.webslesson.info/2017/04/dynamic-autocomplete-search-using-bootstrap-typeahead-with-php-ajax.html
but my the autocomplete doesn't work at all and i can understand why. What's wrong?
<link rel="stylesheet" type="text/css" href="<?php echo base_url('media'); ?>/autocomplete/jquery-ui.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>media/js/order_new/jquery-ui.js"></script>
<script>
$(document).ready(function() {
// alert("hii");
$('#other').autocomplete({
source: '<?php echo base_url('
index.php ') ?>/frontend/location_autocomplete'
});
});
</script>
<input type="text" id="other" name="other" value="" placeholder="what your looking for?" class=" new_search" data-provide="typeahead" data-items="4" data-source='[]'>
You are getting this error because you have not loaded jquery. Your application cannot find a reference to jquery($). Include jquery in your script resources before fetching jquery-ui into your application.
Check the differences in your paths (/) and the libraries (jquery + jquery-ui):
<?php
echo '<link rel="stylesheet" type="text/css" href="' . base_url('media') . '/autocomplete/jquery-ui.css"/>';
echo '<script type="text/javascript" src="' . base_url() . '/media/js/order_new/jquery.js"></script>';
echo '<script type="text/javascript" src="' . base_url() . '/media/js/order_new/jquery-ui.js"></script>';
?>
Check via your developer toolbar the existence of your paths.
Below an demo from Autocomplete | jQuery UI (https://jqueryui.com/autocomplete/):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</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() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
I use dropdown list with PHP to retrieve data from my sql database, It exists on this link.
It worked well but when I change the menu style what I want, does not work.
this menu code is what I want:
<select name="parent_cat" id="parent_cat" data-native-menu="false" class="filterable-select" data-iconpos="left">
I think the problem exists because the menu shows in popup : `#&ui-state=dialog`
but I do not know how to solve this problem.
this full HTML code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#parent_cat").change(function() {
$(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
$.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
$("#sub_cat").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Parent Category</label>
<select name="parent_cat" id="parent_cat" data-native-menu="false" class="filterable-select" data-iconpos="left">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['category_name']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Sub Category</label>
<select name="sub_cat" id="sub_cat"></select>
</form>
</body>
</html>
Please help
I can successfully show the popover on the first list, but I'm having a problem showing it on second list.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bootstrap Skeleton - jsFiddle demo by herlambangpermadi</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<style type="text/css">
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin: 40px;
}
</style>
</head>
<body>
<select class="btn typeahead dropdown-toggle" autofocus width="10" size="4" id="testList2">
<option value="1" data-title="This is item 1." data-content="Lots of stuff to say 1" style="color:red;">Item 1</option>
<option value="2" data-title="This is item 2." data-content="Lots of stuff to say 2" style="color:green;">Item 2</option>
</select>
<?php
require_once 'settings.php';
$db = mysql_connect($dbHost,$dbUser,$dbPass);
mysql_select_db($dbname,$db);
$sql = mysql_query("SELECT * FROM adminklasifier");
while($row = mysql_fetch_array($sql)) {
$clsfr = $row['klasifier'];
$sql = mysql_query("SELECT * FROM adminklasifier");
echo '<select id="testList" name="cmake" class="" autofocus width="10">';
echo '<option value="0" data-title="This is item 1." data-content="Lots of stuff to say 1">-Pilih Domain Klasifikasi-</option>';
while($row = mysql_fetch_array($sql)) {
echo '<option ' . ($clsfr==$row['klasifier']) . ' value="'.$row['klasifier'].'"'.(($_POST['cmake'] == $row['klasifier']) ? 'selected=selected' : NULL).'>'.$row['klasifier'].'</option>';
}
echo '</select>';
}
?>
</body></html>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$("#testList").on('mouseleave', function(e) {
$('#testList').popover('destroy');
});
$("#testList").on('mouseover', function(e) {
var $e = $(e.target);
if ($e.is('option')) {
$('#testList').popover('destroy');
$("#testList").popover({
trigger: 'manual',
placement: 'right',
title: $e.attr("data-title"),
content: $e.attr("data-content")
}).popover('show');
}
});
$("#testList2").on('mouseleave', function(e) {
$('#testList2').popover('destroy');
});
$("#testList2").on('mouseover', function(e) {
var $e = $(e.target);
if ($e.is('option')) {
$('#testList2').popover('destroy');
$("#testList2").popover({
trigger: 'manual',
placement: 'right',
title: $e.attr("data-title"),
content: $e.attr("data-content")
}).popover('show');
}
});
});
</script>
Your Select id is : testlist
<select size="4" id="testList">
You don't have anywhere a testlist2 id, so your javascript call on $("#testList2") will never happen.
Change your selects so that testlist is a class and not an id. Then change your script to $('.testlist') instead of $('#testlist')
Then the event will fire for both select items.
i am creating 2 drop down list that the second one is based on the selection of the first drop down list. the data are retrieved from the mysql database
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playing With Select list</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax_category.php",
data: dataString,
cache: false,
success: function(html)
{
$(".governorate").html(html);
}
});
});
});
</script>
</head>
<body>
<div class="container">
<header>
<h1><strong>Playing With Select List</strong></h1>
<h2>Select One List To see Output On Other</h2>
</header>
</div>
<span style="margin-left:22%">
<label>country :</label> <select name="country" class="category">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
$sql=mysql_query("select country_id,country_name from country");
while($row=mysql_fetch_array($sql))
{
$id=$row['country_id'];
$data=$row['country_name'];
echo '<option value="'.$id.'">'.$data.'</option>';
} ?>
</select>
<label>Governorate :</label> <select name="governorate" class="subcategory">
<option selected="selected">--Select governorate--</option>
</select>
</span>
<br><br><br>
<h1><center><strong>Go To-:TrickToDesign</strong></center></h1>
</body>
</html>
ajax_category.php
<?php
include('db.php');
if($_POST['governorate_id'])
{
$id=$_POST['governorate_id'];
$sql=mysql_query("select b.governorate_id,b.governorate_name from governorate a,contry_id b where b.country_id=a.country_id and parent='$id'");
while($row=mysql_fetch_array($sql))
{
$id=$row['governorate_id'];
$data=$row['governorate_name'];
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
?>
how to make the second drop list appear with data in it that is the error that i face
Change $(".governorate").html(html) to $(".subcategory").html(html)