Here My code when I type the text box ,auto complete items listed in textbox using below code
$(function() {
var availableTags = [<?php echo $data_list;?>];
$( "#ethnicity" ).autocomplete({
source: availableTags
})
});
<input type="text" size="20" id="ethnicity" name="ethnicity" >
how to list all the list when focus or click the text box
Related
code:
<script>
$(function() {
$( "#college_name" ).autocomplete({
source: 'search.php',
minLength:2,
select: function(event, ui) {
var x = ui.item.value;
$("#college_name").attr('value',x);
}
});
});
</script>
<script>
$(document).ready(function(){
$("#college_name").select(function(){
alert("hi");
});
});
</script>
html code:
<input type="text" id = "college_name" name = "college_name" value="" placeholder = "College Name" autocomplete="off">
<input type='text' name='college_id' id='college_id'>
In this code when I wrote any college name in college_name input field autocomplete search i.e. search.php are working all college are showing. But when I select any college from autocomplete it does not show any message like (hi) or any thing. So, how can I fix this problem.
Thank You
Add alert message in Select event of autocomplete.
<script>
$(function() {
$( "#college_name" ).autocomplete({
source: 'search.php',
minLength:2,
select: function(event, ui) {
var x = ui.item.value;
$("#college_name").attr('value',x);
alert("hi");
}
});
});
</script>
<script>
$(document).ready(function(){
var spinner = $( "#spinner" ).spinner();
$('#spinner').autocomplete({
source:'name.php'
});
$( "#getvalue" ).on( "click", function() {
alert( spinner.spinner( "value" ) );
});
});
</script>
<body>
<label for="spinner">To search name type here:=</label>
<input id="spinner" name="value"/>
<p>
<button id="getvalue">Get value</button>
</p>
</body>[1]
Above is the snapshot of the output and i want to get the particular value from this dropdown on get value button clicked and above is jQuery code and html code.
Value from the spinner field can be extracted like this:
$( "#getvalue" ).on( "click", function() {
.
.
value = $("#spinner").val();
alert(value);
});
I have an auto-complete textbox where user can insert an actor name and it works fine. There is a button "browse movies" which should populate a dynamic dropdown showing list of movies by the actor that user has inserted in the text-box. Also, there is another button "add to the list" that if user click on it, the selected options of this dropdown (movies) whould be added to another dropdown which shows all selected movies by user.
Problem
I could populate dropdown dynamically when user clicked the button, also I could move the selected options to the new dropdown (selecteditems), but the problem is that I want to show this dropdown in a new pop-up window (not in the same page where user insert in the text-box). I really don't know how to do it.. should I make the ajax call in target.html (the new pop up window)? I appreciate if someone can let me know how I can do this.
This is what I tried:
<script type="text/javascript">
$(document).ready(function () {
$("#tags").autocomplete({
source: "actorsauto.php",
minLength: 2,
select: function (event, ui){
$("#tags").on('autocompletechange change', function (){
var selectedVal = $(this).val(); //this will be your selected value from autocomplete
// Here goes your ajax call.
$.post("actions.php", {q: selectedVal}, function (response){
console.log(response);
$("#movieName").html(response).show();
});
}).change();
}
});
$('#btnRight').on('click', function (e) {
var selectedOpts = $('#movieName option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#selectedItems').append($(selectedOpts).clone());
$(selectedOpts).remove();
$("#movieName").hide();
$("#tags").val("");
e.preventDefault();
});
function openWindow() {
window.open("target.html","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
</script>
<html>
<body>
<input type="textbox" name= "tag" id="tags" style="display:none;" placeholder="Enter an actor/actress name here" />
<input type=button onclick="javascript:openWindow()" value="Browse movies by this actor">
<select id="movieName" name="movieName[]" multiple="multiple" width="200px" size="10px" style=display:none;>
<input type="button" value=">> Add to selected list >>" id="btnRight" style="display:none;" />
<select id="selectedItems" name="selectedItems[]" multiple="multiple" style="width:200px; size:10px;">
</select>
</select>
</body>
</html>
You could try something like this. Sorry for any mistakes or if it's rubbish
target.html
// this goes in target.html
$('#tags').autocomplete({
source: "actorsauto.php",
minLength: 2,
select: function (event, ui) {
$("#tags").on('autocompletechange change', function () {
var selectedVal = $(this).val(); //this will be your selected value from autocomplete
// Here goes your ajax call.
// here's some magic. using window.opener allows you
// to access variables and functions defined in the parent window.
window.opener.getMovies(selectedVal);
}).change();
}
});
page.html
// this stays in your parent window
function getMovies(value) {
$.post("actions.php", { q: value}, function (response) {
console.log(response);
$("#movieName").html(response).show();
});
}
I'm trying to create a text box that will search a mysql database, provide auto completed text below the text box and then show a confirmation tick or cross to show that the name is already in the database (or not).
I've got it to work with just one text box, but I'd like to add multiple text-boxes on the same page. eg so someone can search for 10 different names, have them all auto completed and then shown with either a green tick or red cross to confirm that they are in the database.
I'm new at this so apologies if it is something obvious that I'm doing wrong!
Thanks in advance.
This is the javascript:
<script type="text/javascript">
function check_username(){
var username = $("#username").val();
if(username.length > 2){
$.post("username.php", {
username: $('#username').val(),
}, function(response){
$('#Info').fadeOut();
setTimeout("finishAjax('Info', '"+escape(response)+"')", 450);
});
return false;
}
}
function finishAjax(id, response){
$('#'+id).html(unescape(response));
$('#'+id).fadeIn(1000);
}
$(function() {
$( "#username" ).autocomplete(
{
source:'source.php' })
});
</script>
This the the html textfield:
<td><input type="text" id="username" type="text" onblur="return check_username();"/></td>
<td><div id="Info"></div></td>
<td><input type="text" id="username2" type="text" onblur="return check_username2();"/></td>
<td><div id="Info"></div></td>
try:
$( "input#username,input#username2" ).autocomplete(
instead of
$( "#username" ).autocomplete(
i make a jquery autocomplete and its data come from mysql database.now i m facing a small problem in this.
i want to show product name in autocomplete as u see in code below & its working good.but after clicking submit button i want to insert product ID instead of product NAME.Below is my code
<?php
require_once "include/config.php";
$sql_product = "select * from tbl_product";
$res_product = mysql_query($sql_product);
?>
<script>
$(function() {
var availableTags = [
<?php
while($rs_product = mysql_fetch_array($res_product))
{
$prod_name = $rs_product['prod_name'];
?>
"<?php echo $prod_name; ?>" <?php echo ", "; ?>
<?php
}
?>
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
<label for="tags">Tags: </label>
<input id="tags" />
You can pass in your values to availableTags source in format like:
[{label:"Prod Name 1", value:1}, {label:"Prod Name2", value:2}]
Create a hidden input element, like
<input type="hidden" name="hidAutoComplete" value="" />
And:
$( "#tags" ).autocomplete({
source: availableTags,
select: function(event, ui) {
var selectedObj = ui.item;
$(this).val(selectedObj.label);
$('input[name="hidAutoComplete"]').val(selectedObj.value);
return false;
}
});
Hope it helps
TRY ( I assume there is prod_id column in your table )
var availableTags = [
<?php
while($rs_product = mysql_fetch_array($res_product))
{
$prod_id[] = $rs_product['prod_id'];
}
echo json_encode($prod_id);
?>
];
update
use json_encode