I am trying to follow this tutorial on autocomplete: http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/
I am open to others if anyone has suggestions, but I digress.
I want to type the last name of a guest and get a list displayed below of all the matches. However I get something real screwy where it says "1 result is available, use up and down arrow keys to navigate." and has a tiny dot somewhere in the text I can click which will fill my readonly textboxes. How can I get this to function properly? I honestly don't know where I am going wrong. I will post my html and jQuery. My php obviously works fine so I don't feel it's necessary to post.
<div class="guestinfo">
<p class="ui-widget">
<div><label>Exisiting Guest List</label></br>
<input type="text" name="guests" id="guests"/></div>
<input readonly="readonly" type="text" id="firstname" name="firstname"/>
<input readonly="readonly" type="text" id="lastname" name="lastname"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>
$(function() {
$('#guests').val("");
$("#guests").autocomplete({
source: "classes/autocomplete_guests.php",
minLength: 2,
select: function(event, ui) {
$('#firstname').val(ui.item.fname);
$('#lastname').val(ui.item.lname);
}
});
});
</script></p>
This is an accessibility feature, you can easily fix this in css, try adding this in your stylesheet:
.ui-helper-hidden-accessible {
display:none;
}
Related
Ive read through a bunch of similar issues with autocomplete but none of the solutions presented have helped me with this. I have a form that is searching for usernames in a database. The autocomplete list is populating with the appropriate names, and from the looks of the code being returned for the autocomplete, the names are coming back with the appropriate IDs and VALUEs.
Why am I unable to submit the form with any data being passed along?
The screen is refreshing as if the form was submitted but no information comes back with the GET. Just a "?" at the end of the url. If I use the keyboard or use the mouse to select an option in the autocomplete dropdown, no information is passed with the GET. Even if I type in something and use a submit button and disregard the autocomplete dropdown there is still no information being passed along.
Here is the current HTML.
<title>TEST</title>
<link href="jquery-ui.min.css" rel="stylesheet" />
<link href="autocomplete.css" rel="stylesheet" />
<script src="jquery-1.11.2.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.autocomplete.html.js"></script>
<script type="text/javascript" src="../test.php"></script>
</head>
<body>
<form id="searchform" method="GET">
<input type="text" id="searchterm" placeholder="Search For Client">
<input type="submit" value="Submit">
<script type="text/javascript" src="../js/watchdog.js"></script>
</form>
</body>
</html>
and the JS named "watchdog" that is watching that form field. What am I missing?
$(function() {
$("#topic_title").autocomplete({
source: "ajax.php",
minLength: 2,
select: function(event, ui) {
var item = ui.item;
console.log(item,ui);
if(item) {
$(this).val(item.value);
$(this.form).submit();
return false;
}
}
});
});
I should also add, this is the seventh or either variation of this script with the same empty results.
Thanks in advance for any help with this.
the autocomplete code looks fine for me. the only problem I can see in your code is you didn't provide the name attribute in the <input> so your browser didn't append it to the url.just replace this
<input type="text" id="searchterm" placeholder="Search For Client">
with this
<input type="text" id="searchterm" name="clientId" placeholder="Search For Client">
(remember to change clientId to the name that your server expects)
<input id="value_1" type="text" name="values_1" value="somthing">
<input id="value_2" type="text" name="values_2" value="somthing">
<input id="value_8" type="text" name="values_8" value="somthing">
Hello everyone. I searched the forum and can not find solution for this. What I want is to catch input id by low to high number and fill it with text.
I have add button for fields
$("#value_1").val("something");
this method working for exactly id number
$( "span input" ).first().val("something");
this working great but i dont know how to catch second and third.
Please help and thanks in advance.
You can use :eq()
$('input:eq(0)').val(0);
$('input:eq(1)').val(1);
$('input:eq(2)').val(2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input id="value_1" type="text" name="values_1" value="somthing">
<input id="value_2" type="text" name="values_2" value="somthing">
<input id="value_8" type="text" name="values_8" value="somthing">
I don't recommend this ID naming convention, but if you must,
// Iterate through input elements, checking if the beginning of the string is 'value_'
$("input[id*='value_']").each(function() {
if ($(this).attr('id').startsWith('value_')) {
// Do what you'd like with the matched input element, being $(this)
}
});
EDIT: This might work better for you:
$("input[id^='value_']").each(function() {
// Do what you'd like with the matched input element, being $(this)
});
Found here: https://stackoverflow.com/a/5413862/5169684
I previously had a an old autocomplete script running with an older jQuery on an input form. I wanted to add markItUp to my text entry form and the autocomplete version I was using was no longer working with the newer jQuery.
I saw that the latest autocomplete was available in jquery-ui.js, but after installing that I started getting the following warning:
Error: cannot call methods on autocomplete prior to initialization;
attempted to call method '/include/suggest.php'
I looked up initialization and added this after $(document).ready(function():
$(this.target).find('input').autocomplete();
Same error message. So I tried making it more specific to the input field that's being autocompleted:
$(this.target).find("input[id^='last_']").autocomplete();
I'm sort of flying blind here. The autocomplete stuff for this page was done by someone I no longer have access to and I've never really written jQuery stuff myself. I'm trying to understand this but right now, I'm stumped.
Here's a skeleton of the page:
<script src="/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="/inc/auto/main.css" type="text/css" />
<link rel="stylesheet" href="ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="/js/markitup/jquery.markitup.js"></script>
<script src="/js/markitup/sets/default/set.js"></script>
[markitup styles]
<script>
function html_entity_decode(str)
{
var ta=document.createElement("textarea");
ta.innerHTML=str.replace(/</g,"<").replace(/>/g,">");
return ta.value;
}
$(document).ready(function() {
$("#markItUp").markItUp(mySettings);
$(this.target).find('input').autocomplete();
$("input[id^='last_']").autocomplete('/include/suggest.php',{
matchCase:true,
formatItem: function(data, i, total)
{
var s=data[0].split(",")
return s.join(" ");
}
});
$("input[id^='last_']").result(function(event, data, formatted){
var ids=this.id.split('_')
var id=ids[1]; // from last_xx got xxx
var s=html_entity_decode(data[0]).split(",");
$(this).next().focus();
$(this).next().select();
//have only last value -- TAB pressed
if(s.length==1)return;
$('#first_'+id).val(s[0]);
$('#middle_'+id).val(s[1]);
$('#last_'+id).val(s[2]);
});
});
</script>
</head>
<body>
<h1>News Inserter</h1>
<form action="/forms/cronkite.shtml" accept-charset="UTF-8" method="POST">
Reporter (Last, First Middle):<br />
<input type="text" id="last_1" name="lastreporters" size="15" maxlength="30" value="" />, <input type="text" id="first_1" name="firstreporters" size="15" maxlength="30" value="" /><input type="text" id="middle_1" name="middlereporters" size="15" maxlength="30" value="" /><br />
Story:<br />
[markitup text area]
<input type="SUBMIT" value="Insert Data" /><input type="RESET" value="Reset" /><br />
</form>
Is the problem solely in my initialization call? One additional point: the autocomplete version I was using was Autocomplete - jQuery plugin 1.1pre Copyright 2007. Has the jQuery-ui version of autocomplete changed enough that I need to update my forms?
I Have Faced Same Problem Due to Older Version Of Jquery, Then I Have added "http://code.jquery.com/jquery-migrate-1.0.0.js" Js Now All Works Fine.
After digging through tutorials, I see that jquery-ui has changed things quite a bit. Off to the tutorials!
Please see my last post for the answer.
On my website I have an input field. I want to use it that users on my page can "tag" other users to an image (similar to the "person xy is on this picture feature on facebook).
As soon as the person starts typing, I want to display possible values via jQuery autocomplete and as soon as the person selects one possible value, I'd like to have the selected value displayed in a tag. (I speak of the optical representation, for example that the value is underlined with a grey, rounded rectangle, like here on SO).
This is my input field:
<label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
<input type="text" class="form-control" id="tokenfield" value="example1, example2" />
Something like this will change the placeholder as you type:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="Bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.placeholderValue').on("keyup", function () {
$('.targetPlaceholder').attr('placeholder', $('.placeholderValue').val());
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="placeholderValue form-control" />
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control targetPlaceholder" placeholder="Username" aria-describedby="basic-addon1" />
</div>
</div>
</div>
</div>
</body>
</html>
I asked the question above a few weeks ago, but now realized, that it wasn't so well asked. And after a few days looking around, I found a solution for it.
I now wanted to let you know about my solution, just as a reference or hint for everyone else who finds this question or has the same problem.
So I am now using this library GitHub Tokenfield.
And use it like this:
<label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
the basic JavaScript for initializing the input field is:
$(document).ready(function () {
$('#tokenfield').tokenfield();
})
However, if you want to use jQuery Autocomplete you can do so like this:
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white']
},
showAutocompleteOnFocus: true,
limit: 1
});
The input field gets initialized as tokenfield, so when entering data and pressing enter, it results in those token-badge-tag things.
After intitialization, it shows 3 tags, "red", "green" and "blue", which the library takes from the "value"-field of the input field.
I like this solution and library very much, because it also offers mechanisms to bind to jQuery Autocomplete via ajax, which is exactly what I wanted and needed.
I hope I was able to help somebody or save some time.
HTML:
<fieldset>
<p>
<label>SOME LABEL</label><span class="required"> *</span>
</p>
<input type="text" id="txtBox">
</fieldset>
Using jQuery i am trying to get "span.required" and add a class "missing" (changes color to red).
JQuery Code:
$('#txtBox').closest('fieldset').find('span.required').addClass('missing');
JQUERY CODE FOR required field validator in ASP.NET:
for (var i = 0; i < Page_Validators.length; i++) {
var val = Page_Validators[i];
var ctrl = document.getElementById(val.controltovalidate);
if (ctrl != null && ctrl.style != null) {
if (!val.isvalid) {
ctrl.closest('fieldset').find('span.required').addClass('missing');
}
else {
//alert('no error');
}
}
}
ERROR via Console: object [ctrl object - the textbox] has no method closest
i have tried different interations using "find" "parent" etc. but nothing i try seems to work.
What is wrong with my code? I cannot grab that span.required
Thank you to everyone's input, I have learned a lot from each of your input. EVERYONE's answer has valid and working code, however only the selected provided the solution.
First off, there are a couple of changes in your HTML that you should make which will not only help you solve this issue, but will also make for cleaner, more valid code:
Add a for attribute to all of your <label> tags that pairs them with the input that they match (this really should always be done with labels), and
Move the <span class="required"> *</span> inside the label (since it really is part of the label)
The resulting code would look like this:
<fieldset>
<p>
<label for="txtBox">SOME LABEL<span class="required"> *</span></label>
</p>
<input type="text" id="txtBox">
</fieldset>
Once you've done that, what you are trying to accomplish becomes much easier:
Instead of:
ctrl.closest('fieldset').find('span.required').addClass('missing');
. . . you can use the id of the input (val.controltovalidate) as part of a JQuery selector to find the related label directly:
var $targetLabel = $("label[for='" + val.controltovalidate +"']")
$targetLabel.find('span.required').addClass('missing');
I've used this many times to pair validations with the labels of the field that is being validated . . . quick and clean. :)
Edit: I split up the last JS piece to keep it from scrolling, but it could be one line. :)
Try txtbox.parent() instead.
txtbox.parent().find('span.required-field').addClass('missing')
$('span.required').addClass('missing');
Try this:
$(function(){
$('#txtBox').parent().find('span.required').addClass('missing');
});
Check http://jsfiddle.net/alaminopu/unZPZ/
Check this one out, I used both, closest() and parent().
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.missing{color:red;}
.required{color:blue;}
</style>
<script>
$(document).ready(function(){
$(function(){
$('#txtBox').parent().find("span.required").removeClass("required").addClass("missing");
//$('#txtBox').closest("fieldset").find("span.required").removeClass("required").addClass("missing");
});
});
</script>
</head>
<body>
<fieldset>
<p>
<label>Some Label</label> <span class="required"> *</span>
</p>
<input type="text" id="txtBox">
</fieldset>
</body>
</html>
http://jsfiddle.net/GdBnw/
HTH.