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.
Related
Hi I'm making a change to a text area and thanks to this plugin I can mention users from a db after entering # in a textarea you place the complete code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link href="bootstrap-suggest.css" rel="stylesheet" type="text/css">
</head>
<body>
<textarea class="form-control" rows="8" id="example-1"></textarea>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="bootstrap-suggest.js"></script>
<script>
var users = [
{username: 'lodev09', fullname: 'Jovanni Lo'}
];
$('#example-1').suggest('#', {
data: users,
map: function(user) {
return {
value: user.username,
text: '<strong>'+user.username+'</strong> <small>'+user.fullname+'</small>'
}
}
})
</script>
</body>
</html>
in the user variable there are the search fields by default, I ask you for help, which instead of the defaul fields in the variable, the search is done in a php page, the data to search from my database sql, how can I change the code? how do I change defaul fields with dynamic fields taken from the database? Thanks I hope you help me
So I pretty much just followed the documentation on http://lodev09.github.io/bootstrap-suggest/#api
I wanted to include Axios as that's a more preferred way to fetch data in large scale applications.
and in their example return $.getJSON("users/data.json", { q: q }); using q by default will look up all the keys in the array. You can specify if you only want to search say for username with { username: q }
Here's my working db example you can use from {} myjson
Now the part that'd you change for getting this to work with your php backend is the api and api endpoint you've setup.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<link href="bootstrap-suggest.css" rel="stylesheet" type="text/css" />
</head>
<body>
<textarea class="form-control" rows="8" id="example-1">type after -> #</textarea>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://lodev09.github.io/bootstrap-suggest/bower_components/bootstrap-suggest/bootstrap-suggest.js"></script>
<script>
$('#example-1').suggest('#', {
data: function(q) {
if (q) {
return $.getJSON('https://api.myjson.com/bins/18vsxq', {
q: q
}).then(function(Response) {
return Response.users
});
}
},
map: function(user) {
return {
value: user.username,
text: '<strong>' + user.username + '</strong> <small>' + user.fullname + '</small>'
}
}
})
</script>
</body>
</html>
anyways hopes this helps,
-Brendan
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.
I'm having trouble with completing an autocomplete function in Jquery with data from database. Whenever I type something I always get 'no results found' message. I want it to display a country name as the user is typing.
jquery.php
<?php
require "database/database.php";
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="CSS/style.css">
<script type="text/javascript" src="jquery/jquery-1.11.3.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
</head>
<body>
<form action="" method="post">
<p><label>Country:</label><input type='text' name='country' value='' class='auto'></p>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('.auto').autocomplete({
source:"suggested.php",
MinLength: 2
});
});
</script>
</body>
</html>
This is my suggested.php page:
<?php
require "database/database.php";
$term = trim(strip_tags($_GET['term']));
$data = mysql_query("SELECT * FROM countries WHERE countryname LIKE '%".$term."%'");
while($row = mysql_fetch_assoc($data)) {
$data[] = array(
'label' = $row['countryname'],
'value' = $row['countryname']
);
}
echo json_encode($data);
flush();
}
?>
In the database I have a table named countries and within it countryid, countryname and countryflag. I need to extract only the countryname column.
I've tried using $_GET['term'] and $_REQUEST['term'].
I've tried different tutorials but none of them seems to work.
If you have any suggestions please tell me.
Thank you
It will be delay your execution if you run query in every time when you type,because you can input value as a query condition value!
I can give you some I tested logic is run your query first when document is loaded and store as a json data type,then you can set source data in autocomplete
This can reduce your page delay respond time by sql query running
<form action="" method="post">
<p><label>Country:</label><input type='text' name='country' value='' class='auto'></p>
</form>
<script type="text/javascript">
$(document).ready(function () {
var source = [];
$.ajax({
url : "suggested.php",
data : "GET",
dataType : "json",
success : function(data){
for(var i in data){
source.push(data[i]);
}
}
});
$('.auto').autocomplete({
source: source,
MinLength: 2
});
});
</script>
suggested.php
<?php
require "database/database.php";
$data = mysql_query("SELECT * FROM countries");
$result = array();
while($row = mysql_fetch_assoc($data)) {
$result[] = array(
'label' = $row['countryname'],
'value' = $row['countryname']
);
}
echo json_encode($result);
flush();
}
?>
I am trying to make a small tag-input inside a form, where I want to get data directly from MySQL.
I have found a tutorial on making a local version, where the data is stored inside an array on the page and this works just fine, but I would like it to retreive data from MySQL on the fly.
I have tried to modify the script from local to remote and I have succeeded in making connection to the MySQL database through the remote file with Json- I just cannot figure out how to make the lookup work together with the input field so that the Typeahead (autocomplete) reacts on the input.
I am not an oracle in jQuery, but I am trying to learn :-)
My code looks like this:
tags.php
<!-- Bootstrap styling for Typeahead -->
<link href="/dist/css/tokenfield-typeahead.css" type="text/css" rel="stylesheet">
<link href="/dist/css/bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
<link href="/docs-assets/css/pygments-manni.css" type="text/css" rel="stylesheet">
<link href="/docs-assets/css/docs.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/dist/bootstrap-tokenfield.js" charset="UTF-8"></script>
<script type="text/javascript" src="/docs-assets/js/scrollspy.js" charset="UTF-8"></script>
<script type="text/javascript" src="/docs-assets/js/affix.js" charset="UTF-8"></script>
<script type="text/javascript" src="/docs-assets/js/typeahead.bundle.min.js" charset="UTF-8"></script>
<p><strong>Using Twitter Typeahead</strong></p>
<form class="tagsform" method="post" action="/pages/tagscompile.php">
<div class="form-group">
<input type="text" class="form-control tokenfield-typeahead" name="tags" />
</div>
<div class="form-group">
<input type="submit" class="btn btn-default" name="send" value="SEND">
</div>
</form>
<script>
var engine = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
'cache': false,
url: '/pages/tags_engine.php?q=%QUERY',
wildcard: '%QUERY',
filter: function (data) {
return data;
}
}
});
engine.initialize();
$('.tokenfield-typeahead').tokenfield({
typeahead: [null, { source: engine.ttAdapter() }]
});
</script>
My tags_engine.php file looks like this:
<?php include($_SERVER['DOCUMENT_ROOT'].'/settings.inc.php');
$q = strtolower($_GET["q"]);
if (!$q) return;
$sql = "select tags as value from tags";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_assoc($rsd)) {
$rows[]=$rs;
}
// I am working on learning MySQLi but until that sticks, this MySQL will do.
print json_encode($rows);
?>
I really appreciate your help.
It works - the problem of course was in the MySQL SELECT. After making this search from the query it worked.
$sql = "select tags as value from tags WHERE tags LIKE '$q%'";
I am sorry for posting the question with such a clear mistake.
I'm trying to use jquery ui autocomplete but its not working. I just pasted an old code I have, that works in other application that uses with jquery 1.4.4 and jquery ui 1.8.6. Now I'm trying to use with jquery 1.6 and jquery ui 1.8.12. The date picker is working but the autocomplete just blinks the field and shows nothing. Here are the codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>autocomplete</title>
<link rel="stylesheet" href="css/jquery.ui.all.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#m').autocomplete({
source: "search.php",
minLength: 2
});
$('#dt').datepicker({
dateFormat: 'dd/mm/yy',
showWeek: true,
firstDay: 1,
changeMonth: true,
changeYear: true
});
});//jQuery End
</script>
</head>
<body>
<div class="ui-widget">
<label for="m">uf: </label>
<form>
<input type="text" id="m" name="m" />
<input type="text" id="dt" class="dt" />
</form>
</div>
</body
</html>
<?php
include_once 'inc/mysqli.php';
//$term = strtolower($_REQUEST['term']); //this was not needed
$term = $_REQUEST['m'];
$query = "SELECT * FROM cidades WHERE nome LIKE '%$term%'";
$result = $mysqli->query($query);
$arr = array();
while($obj = $result->fetch_assoc()) {
$arr[] = $obj['nome'];
}
//echo '('.json_encode($arr).')'; //for jsonp
echo json_encode($arr);
?>
I have no patience with this code and probably is because of it that I can't see the mistake.
[Edited]
If I make a simple SELECT statement the autocomplete works but not in the way I want. It shows all the results and I want it to show the filtered results by the $term variable which doesn't work. It will become very slow when it starts to search the real table with more than 9000 entries.
Is search.php in the same folder as this page?
Have you checked the network tab of firebug to see if search.php is being called correctly and returns the correct results?