I found a tutorial on how to create a simple autosuggest with PHP & MySQL. This is the tutorial I'm using: http://www.2my4edge.com/2013/08/autocomplete-search-using-php-mysql-and.html
When I try this tutorial, I'm finding a bug. When I search, and click on the image or text, the item will not be selected. You have to click in the "white" area. I have tried to change the script, but I still have the same problem, because I still don't know much about JavaScript.
This is the tutorial script:
Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Autocomplete search using php, mysql and ajax</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function () {
$(".search").keyup(function () {
var searchid = $(this).val();
var dataString = 'search=' + searchid;
if (searchid != '') {
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function (html) {
$("#result").html(html).show();
}
});
}
return false;
});
jQuery("#result").live("click", function (e) {
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function (e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("search")) {
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function () {
jQuery("#result").fadeIn();
});
});
</script>
<style type="text/css">
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
}
.content {
width: 900px;
margin: 0 auto;
}
#searchid {
width: 500px;
border: solid 1px #000000;
padding: 10px;
font-size: 14px;
}
#result {
position: absolute;
width: 500px;
padding: 10px;
display: none;
margin-top: -1px;
border-top: 0px;
overflow: hidden;
border: 1px #cccccc solid;
background-color: white;
}
.show {
padding: 10px;
border-bottom: 1px #999999 dashed;
font-size: 15px;
height: 50px;
}
.show:hover {
background: #4c66a4;
color: #ffffff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
<form method="post">
<input type="text" class="search" id="searchid" name="searchid"
placeholder="Search for people"/> Ex:arunkumar, shanmu, vicky<br/>
</form>
<div id="result">
</div>
</div>
</body>
</html>
Search.php
<?php
include('db.php');
if($_POST)
{
$q=$_POST['search'];
$sql_res=mysql_query("select id,name,email from autocomplete where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['name'];
$email=$row['email'];
$b_username='<strong>'.$q.'</strong>';
$b_email='<strong>'.$q.'</strong>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="show" align="left">
<img src="author.PNG" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span> <br/><?php echo $final_email; ?><br/>
</div>
<?php
}
}
?>
Please help me to fix this bug, because I want to apply this autosuggest for my website.
In search.php file, instead of
< div class="show" align="left" >
add
<a class="show" align="left" style="display:block" href="javascript:void(0)"
onclick="$('#searchid').val(this.val)">
I didnt checked it,
but just check for syntax error at onclick function, it will work
Related
I have dynamically generated text type inputs with unique ids (item1, item2, item3, etc) from my html by clicking on the "+" button. I tried to post all the values by using dynamically generated ids by doing
$.ajax({
method: 'POST',
url:'/addItems',
type: 'POST',
data: {
item: $('#item' + count).val()
}
however, nothing passes to my data array. I tried with 'item1' instead of 'item' + count and it worked but it's only one value that's already on my html. I also tried to use dataForm or for loops but did not work. Does anyone have an idea of how to pass all values to an array called "items" in my javascript file? for more details, here is my code snippet below (ignore css file. it's for code snippet to run):
const express = require("express");
const app = express();
app.use(express.urlencoded({extended: true}));
app.use(express.static("public"));
app.set("view engine", "ejs");
app.use(express.json());
var items = [{item: 'study Node.js'}, {item: 'play Overwatch'}];
app.get('/myForm', (req, res) => res.render("pages/myForm"));
app.get('/result', (req, res) => res.render("pages/result", {
items:items}));
app.post('/addItems', (req, res) => {
console.log(req.body);
items.push(req.body);
res.json({success: 'true'});
});
app.listen(3000);
h1 {
grid-area: itemNumber;
color: white;
font-family: monospace;
margin-left: 10px;
display: inline;
}
input {
background-color: #DEFDE0;
border-radius: 5px;
border: 1px solid;
outline: none;
overflow: auto;
grid-area: textarea;
margin-top: 20px;
width: 150px;
margin-left: 5px;
}
button {
grid-area: plus;
padding: 7px;
width: 35px;
border: 1px solid;
outline: none;
border-radius: 5px;
margin-top: 22px;
margin-left: 5px;
}
#submit {
background-color: #F0DEFD;
border-radius: 5px;
border: 1px solid;
position: static;
grid-area: send;
padding: 7px;
width: 60px;
}
body {
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="myFormStyle.css">
<title>My Form</title>
</head>
<body>
<!-- Create your form here -->
<div class="container">
<br/>
<br/>
<div class="form-group">
<form name="add_name" id="add_name" method="post">
<div class="table table-bordered" id="item_field">
<h1>Todo Item 1</h1>
<input type="text" name="name[0]" id="item1" class="task" cols="22" rows="2">
<button type="button" name="add" id="add" class="addButton">+</button></td>
</div>
<input type="button" name="submit" id="submit" value="Submit"/>
</form>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function() {
var count = 1;
var $itemIds = Array.from($('h1 + .task'))
var ids = $itemIds.map(task => $(task).attr('id'))
$('#add').on('click', function() {
count++;
$('#item_field').append('</br><h1>Todo Item ' + count +'</h1><input type="text" name="name['+ (count - 1) +']" id="item'+ count +'" class="task" cols="22" rows="2">');
$('#add').insertAfter('#item' + count);
});
$('#submit').on('click', function() {
$.ajax({
method: 'POST',
url:'/addItems',
type: 'POST',
data: {
item: $('#item' + count).val()
}
}).
done(function(data) {
console.log(data);
console.log(ids);
alert(data.success);
}).
fail(function(error) {
console.log(error);
})
})
});
</script>
You need to loop through all of the elements to build an array of items containing the values for each item, something like the following snippet.
Note that I left out the ajax part since you can't put Node code in the snippet, so the response in the snippet will be meaningless. The part relevant to your question is the for-loop creating the items array in the script
h1 {
grid-area: itemNumber;
color: white;
font-family: monospace;
margin-left: 10px;
display: inline;
}
input {
background-color: #DEFDE0;
border-radius: 5px;
border: 1px solid;
outline: none;
overflow: auto;
grid-area: textarea;
margin-top: 20px;
width: 150px;
margin-left: 5px;
}
button {
grid-area: plus;
padding: 7px;
width: 35px;
border: 1px solid;
outline: none;
border-radius: 5px;
margin-top: 22px;
margin-left: 5px;
}
#submit {
background-color: #F0DEFD;
border-radius: 5px;
border: 1px solid;
position: static;
grid-area: send;
padding: 7px;
width: 60px;
}
body {
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="myFormStyle.css">
<title>My Form</title>
</head>
<body>
<!-- Create your form here -->
<div class="container">
<br/>
<br/>
<div class="form-group">
<form name="add_name" id="add_name" method="post">
<div class="table table-bordered" id="item_field">
<h1>Todo Item 1</h1>
<input type="text" name="name[0]" id="item1" class="task" cols="22" rows="2" />
<button type="button" name="add" id="add" class="addButton">+</button>
</div>
<input type="button" name="submit" id="submit" value="Submit" />
</form>
</div>
</div>
<script>
$(document).ready(function() {
var count = 1;
var $itemIds = Array.from($('h1 + .task'))
var ids = $itemIds.map(task => $(task).attr('id'))
$('#add').on('click', function() {
count++;
$('#item_field').append('<br><h1>Todo Item ' + count + '</h1><input type="text" name="name[' + (count - 1) + ']" id="item' + count + '" class="task" cols="22" rows="2">');
$('#add').insertAfter('#item' + count);
});
$('#submit').on('click', function() {
var items = [];
for (let i = 1; i <= count; i++) { // iterate through all of the items
items.push($('#item' + i).val());
}
console.log(items);
});
});
</script>
</body>
</html>
I am making a service in PHP where it creates a folder with a name typed into the input field.
I have tried to cobble together a little JavaScript to make the page redirects to the folder you just created(and the file called toggle.php)
here is my JavaScript:
<?php
function recurse_copy($src,$dst) {
$dir = opendir($src);
#mkdir($dst);
while(false !== ( $file = readdir($dir)) ) {
if (( $file != '.' ) && ( $file != '..' )) {
if ( is_dir($src . '/' . $file) ) {
recurse_copy($src . '/' . $file,$dst . '/' . $file);
}
else {
copy($src . '/' . $file,$dst . '/' . $file);
}
}
}
closedir($dir);
}
$src = "./xe7";
$dst = $_POST['foldername'];
recurse_copy($src,$dst);
?>
<link rel="stylesheet" type="text/css" href="style.css" />
<div>
<body onload="timer=setTimeout('removeControls();',3)">
<h1>Drawblog</h1>
<div class="FAQ" style ="box-shadow: 1px 1px 3px rgba(0,0,0,0);">
Control panel
-
<div class="list" style ="box-shadow: 1px 1px 3px rgba(0,0,0,0);">
<form method="post" >
<input type="text" name="foldername" id ="togl">
<input type="submit" name="submit" id = "sm2" value="Create panorama" onclick ="newDoc();">
<script type="text/javascript">
function newDoc() {
var folder = document.getElementById("togl").value;
var url = "http://hokuco.com/test/" + folder + "/toggle.php";
window.location.assign(url)
};
</script>
</form>
<h3>Or,</h3>
<h2>Login with an access code(the account you just typed into the box above, or a code someone shared with you)</h2>
<input type="text" id="field" />
<button id="submit">Go</button>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
document.getElementById("submit").addEventListener("click", function(){
var folder = document.getElementById("field").value;
var url = "http://hokuco.com/test/" + folder + "/index.html";
window.location.href = url;
});
</script>
</div>
</div>
<h1> </h1>
<h1> </h1>
<p>make shocking panoramas in minutes, no account needed</p>
<br/>
<br/>
<br/>
<br/>
<p>special thanks to:</p>
<div id="info">three.js css3d - panorama.</div>
<h5>a hokuco company</h5>
</div>
<style>
.FAQ {
vertical-align: top;
height:auto !important;
}
.list {
display:none;
height:auto;
margin:0;
float: left;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
/*style the (+) and (-) */
.hide, .show {
width: 45px;
height: 30px;
font-size: 20px;
color: #000;
text-shadow: 0 1px 0 #666;
text-align: center;
text-decoration: none;
background: #ffffff;
opacity: .95;
border-bottom: thick solid #000000;
margin-right: 0;
float: left;
margin-bottom: 25px;
}
.hide:hover, .show:hover {
text-decoration: none;
opacity: 1;
color: #000;
background: #ffffff;
margin-bottom: 25px;
}
.list p{
height:auto;
margin:0;
}
.question {
float: left;
height: auto;
width: 90%;
line-height: 20px;
padding-left: 20px;
margin-bottom: 25px;
}
</style>
<form id="form">
<input type="text" id="mysearch-text">
<input type="submit" value="Submit">
<script>
window.onload = function () {
document.getElementById("form").onsubmit = function () {
var filmName = document.getElementById("mysearch-text").value;
alert(filmName);
if (filmName == "parker") window.location.href = "http://www.w3fools.com";
else alert("hello");
return false; //prevent the default behavior of the submit event
}
}
I am stuck on a problem . I am having Code to fill autocomplete with results from wipipedia using wikidata api I have used the following git hub resource .
My HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementing Autocomplete Search using Wikipedia OpenSearch API - Demo by W3lessons</title>
<style>
body {
background: #a8a8a8 url(bg.png);
background-repeat:no-repeat;
margin:0 auto;
padding:0;
color: #7f7f7f;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:18px;
width:100%;
}
h1 { color:#F7F7F7; font-size:24px; font-weight:normal; }
#search input {
background: none repeat scroll 0 0 #fff;
border: 0 none;
color: #7F7F7F;
float: left;
font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
height: 20px;
margin: 0;
padding: 10px;
transition: background 0.3s ease-in-out 0s;
width: 300px;
}
#search button {
background: url("search.png") no-repeat scroll center center #7eac10;
cursor: pointer;
height: 40px;
text-indent: -99999em;
transition: background 0.3s ease-in-out 0s;
width: 40px;
border: 2px solid #fff;
}
#search button:hover {
background-color:#000;
}
</style>
</head>
<body>
<center>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5104998679826243";
/* mysite_indivi */
google_ad_slot = "0527018651";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
<div style="width:50%; margin:0 auto;">
<p style="margin:20px;"><img src="http://w3lessons.info/logo.png" /></p>
<div style="margin:20px;">
<h1>Autocomplete Search using Wikipedia Opensearch API</h1>
<form method="get" id="search">
<input type="text" class="searchbox" value="Type here.. " onblur="if(this.value == '') { this.value = 'Type here..'; }" onfocus="if(this.value == 'Type here..') { this.value = ''; }" name="s">
<button type="submit">Submit</button>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(".searchbox").autocomplete({
source: function(request, response) {
console.log(request.term);
$.ajax({
url: "http://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {
'action': "opensearch",
'format': "json",
'search': request.term
},
success: function(data) {
response(data[1]);
}
});
}
});
</script>
</body>
</html>
My Problem is I want to get data in autocomplete in particular category like if I can use this autocomplete on video in page then it should show results only related to video autocomplete in or for music it should show fill only music category results in autocomplete or so on from which category it needs to
action:opensearch is for autocomplete. Use the regular search with incategory:<category_name> prefix:<word_prefix>.
I'm having problems recording a image. On the DB it shows as fotos-foto.bin (Binary).
I'm using Codeigniter and a jquery plugin, I'm able to acess the camera, take the picture, but it is not recording properly.
Any thoughts?
Here is my code
VIEW
<html>
<head>
<title>WebCam</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
#content{
margin: 0 auto;
width: 1000px;
position: relative;
}
.fotografia{
width: 320px;
height: 240px;
border: 20px solid #333;
background: #eee;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: relative;
margin-top: 50px;
margin-bottom: 50px;
}
.marca {
z-index: 2;
position: absolute;
color: #eee;
font-size: 10px;
bottom: -16px;
left: 152px;
}
#obturador,#guardarFoto{
padding: 10px;
border: 1px solid;
background-color: #444;
color: #fff;
cursor: pointer;
margin-left: 50px;
}
</style>
</head>
<body>
<div id="content">
<div style="float:left;width:50%">
<div id="webcam" class="fotografia">
<span class="marca">tutoriales.com</span>
</div>
</div>
<div style="float:left;width:50%">
<div id="say-cheese-snapshots" class="fotografia">
<span class="marca">Snapshots</span>
</div>
</div>
<div style="clear:both"></div>
<div style="float:left;width:50%">
<span id="obturador">Tomar foto</span>
</div>
<div style="float:left;width:50%">
<span id="guardarFoto">Guardar Foto</span>
</div>
<div class="fotografia">
<img id="fotoGuardada" src="" style="display:none" />
<span class="marca">Foto Armazenada</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="<?php echo base_url() ?>assets/js/say-cheese.js"></script>
<script type="text/javascript">
var img=null;
var sayCheese = new SayCheese('#webcam',{snapshots: true});
sayCheese.start();
$('#obturador').bind('click', function(e){
sayCheese.takeSnapshot(320,240);
return false;
});
sayCheese.on('snapshot', function(snapshot){
img = document.createElement('img');
$(img).on('load', function(){
$('#say-cheese-snapshots').html(img);
});
img.src = snapshot.toDataURL('image/jpg');
});
$('#guardarFoto').on('click', function(canvas){
var src = img.src;
alert("#guardarFoto clicked!");
data = {
src: src
};
$.ajax({
url: '<?php echo base_url() ?>webcam/ajax',
data: data,
type: 'post',
sucess: function(respuesta) {
$('#fotoGuardada').attr('src', respuesta).show(500);
}
});
});
</script>
</body>
CONTROLLER
<?php
class Webcam extends CI_Controller{
public function __construct() {
parent::__construct();
$this->load->model(array('Fotos_model'));
}
public function index() {
$this->load->view('webcam/index_view');
}
public function ajax () {
$src = $this->input->post('src');
$this->Fotos_model->gravarFoto($src);
$foto = $this->Fotos_model->getLastFoto();
$this->output->set_output ($foto);
}
}
MODEL
<?php
class Fotos_model extends CI_Model{
public function gravarFoto($foto) {
return $this->db->insert('fotos',array('foto'=>$foto));
}
public function getLastFoto() {
return $this->db->order_by('id','desc')->get('fotos')->row()->foto;
}
}
I'm trying to create a program where the user will input some text in a field and when pressing "Start" the text will go to a paragraph but it will be shown backwards.
Trying to do this with Html,jquery and Css.
How can I do this?
Here's the Html:
<!DOCTYPE html>
<html id="head">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="BackTalk.js"></script>
<link rel="stylesheet" type="text/css" href="BackTalk.css">
<title>BackTalk</title>
</head>
<body id="body">
<div id="Main">
<form>
<input id="input" type="number" value="Start">
<button id="input2" onclick="">Start</button>
</form>
</div>
<form id="frm">
<p id="para"></p>
</form>
</body>
</html>
And the $/javascript (Main part I need help with as you can see):
$(document).ready(function () {
$('#input2').click(function () {
});
});
Css (Don't know if needed):
#head {
}
#body {
background-image: url('stardust.png');
}
#Main {
width: 230px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#frm {
width: 230px;
height: 500px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#input {
border-radius: 10px;
}
#input2 {
border-radius: 10px;
}
Try this http://jsfiddle.net/Tushar490/th778nfs/
$('#input2').click(function () {
var value=$('#input').val();
console.log($('#para').text(value.split("").reverse().join("")));
});
Not sure if this is exactly what you're looking for:
$(document).ready(function () {
$('#startbutton').click(function () {
$('#para').text($('#input').val().split('').reverse().join(''));
});
});
JSFiddle