Hi I'm trying to implement some JQuery to use the Autocomplete UI. I have a drop down list with two options. Actor and Film. Depending on what is selected, I would like the source for the autocomplete input box to be different. Is there anything wrong with the JQuery I have?
<script type="text/javascript">
$(document).ready(function(){
$("#selectType").change(function() {
if ($(this).val() == "Actor"){
$("#tags").autocomplete({
source: "nameSearch.php",
minLength: 2
});
}
else if($(this).val() == "Film"){
$("#tags").autocomplete({
source: "FilmSearch.php",
minLength: 2
});
}
});
});
</script>
Use like this:
$(document).ready(function () {
//Create widget with default data source
$("#tags").autocomplete({
source: "nameSearch.php",
minLength: 2
});
$("#selectType").change(function () {
// Assign new data source like that :
if ($(this).val() == "Actor")
$("#tags").autocomplete("option", "source", "nameSearch.php");
else
if ($(this).val() == "Film")
$("#tags").autocomplete("option", "source", "FilmSearch.php");
// And what is your 2 conditions are not met?????
});
});
Related
I'm trying to hide an element if some specific value of input is not found on the site.
I can hide an element by:
$(document).ready(function() {
$("#someid").hide();
});
But how to show it, if the value is found? I'm trying to do something like this:
$(document).ready(function() {
$("#someid").hide();
$("input[value$='somevaluetobefound']").ready(function() {
$("#someid").show();
});
});
What am I doing wrong?
Try this:
$(document).ready(function() {
$("#someid").hide();
$('#inputID').on('input', function() {
if ( $('input').val() === 'test') {
$("#someid").show();
}
else $("#someid").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type 'test' to show DIV<br>
<input id="inputID" type="text">
<div id="someid">DIV</div>
I had not fully understood what you where trying to acomplish:
$( document ).ready(function() {
if (!$('input[value="somevaluetobefound"]'))
$("#someid").hide();
$(':input').on('keyup', function(){
if ($(this).val() == 'somevaluetobefound')
{
$("#someid").show();
} else {
$("#someid").hide();
}
});
});
I have updated the code here
EDIT: Based on new info provided by OP
$( document ).ready(function() {
if ($(':radio[value="somevaluetobefound"]').length !== 0)
$("#someid").show();
else
$("#someid").hide();
});
Sample here
<script type="text/javascript">
$(document).ready(function () {
$("input[value=somevaluetobefound]").closest('#someid').hide();
});
</script>
you can try this :
$(document).ready(function() {
$("#someid").hide();
if($("#someid").val() !=''){
$("#someid").show();
}
});
Improvising on #Arkej's answer:
$(document).ready(function() {
$("#someDiv").hide();
$(':input').on('input', function() {
if ( $('input').val() === 'somevalue') {
$("#someDiv").show();
}
else $("#someDiv").hide();
});
});
Here I am using :input to find all input boxes on the page. Since you need to either have an ID the input field you want or just have all input text boxes be used to show or hide your div depending on what the value you are looking for.
Also refer to this for guidance on getting val from inputs:
Get the value in an input text box
Cheers
I all,
I have this code
<select id = 'jack'>
<option id = 'test1' >test1</option>
<option id = 'test2' >test2</option>
</select>
<input id="calendar" type="text" disabled="disabled"/>
and this is the javascript
function enableEnd() {
end.attr('disabled', !this.value.length).datepicker('option', 'minDate', this.value);
}
var end = $('#calendar').datepicker();
$('#jack').datepicker({
onSelect: enableEnd
}).bind('input', enableEnd);
I would make sure that the schedule is active when I choose from the menu test1 while I would like to remain disabled if I choose test2
If i understood your question, you are looking for this.
var calendar = $("#calendar").datepicker("option", "disabled", true);
$("#jack").on('change', function () {
if($(this).val() == 'test1') {
calendar.datepicker( "option", "disabled", false);
} else {
calendar.datepicker( "option", "disabled", true);
}
});
You can simply do it this way:
$('#jack').on('change', function(e){
var val = $(this).val();
$('#calendar').attr('disabled', val == 'test2');
});
If you want to activate the calendar when test1 is selected, try something like this:
$(document).ready(function(){
$('#jack').on('change', function (e) {
if($('#jack').val()=="test1"){
// enable the calendar
$('#calendar').datepicker({
format:"mm-dd-yyyy",
autoclose: true
});
}else{
$('#calendar').datepicker('remove');
}
});
});
jQuery's "change" is the way to go, I think. Then you've got a one-liner :
$('#jack').change(function() {
$('#calendar').attr('disabled', $(this).val() == 'test2');
});
Fiddle here showing the desired behaviour : http://jsfiddle.net/y6pu4dwu/1/
Note : I'd suggest removing the "disabled" by default, since test1 will be selected at first.
Edit : this disables the HTML element itself, but the plugin exposes an API to disable (see other answers), so this is not the only way.
After a user has selected a value from an autocomplete list (Using jQuery autocomplete), I need to remove everything from the input box after the first space.
I got this far then got a bit lost. (currently just alerts on blur)
<script>
$(function() {
$( ".pn-autocomplete" ).autocomplete({
source: "pn-json.php",
minLength: 2,
}).blur(function () {
alert($(this).val());
});
});
</script>
Demo
Check this code snippet - It would skip all the text after the first space.
$(function () {
$( ".pn-autocomplete" ).autocomplete({
source: "pn-json.php",
minLength: 2,
}).blur(function () {
$(this).val(function () {
return this.value.split(' ')[0];
});
});
});
You can update the value to the first word like this,
<script>
$(function() {
$( ".pn-autocomplete" ).autocomplete({
source: "pn-json.php",
minLength: 2,
}).blur(function () {
var input_val = $(this).val(),
first_word = input_val.replace(/(\w+).*/,"$1");
$(this).val(first_word);
});
});
</script>
I am using the jQuery autocomplete to with a list of 800 values
j$(function() {
var availableTags = [item1,item2, item3,...];
j$( "#stdcodes" ).autocomplete({
source: availableTags
});
});
This works fine, what i want to do is limit or validate that the input in one the autocomplete values.
Can anyone help with this?
Try something like this:
$("#stdcodes").autocomplete({
open: function(e) {
valid = false;
},
select: function(e){
valid = true;
},
close: function(e){
if (!valid) $(this).val('');
},
source: availableTags
});
$("#stdcodes").change(function(){
if (availableTags.indexOf($(this).val()) == -1){
$(this).val("");
}
});
Added extra validation, in case autocomplete doesn't execute
Fiddle:
http://jsfiddle.net/Ra96R/2/
Try use this way:
$("#stdcodes").autocomplete({
source: function (request, response) {
/* apply validation on request.term: */
var localResults = $.ui.autocomplete.filter(localArray, extractLast(request.term));
response(localResults);
}
});
Can it?
$("#my_input").autocomplete({
source: function (request, response) {
if ($.trim(request.term).length > 0) {
// THIS MY REQUEST
}
}
})
okay iM using jquery autocomplete and Everything works fine but I want it to trigger the search button when a suggestion is selected. the code i have is this.
$( "#tags" ).autocomplete({
source: availableTags
select: function (event, item)
{
if (event.keyCode == 13){
$('#IDofMYform').submit()
}
}
});
});
You should set the value to the form input before submitting. If you don't, your form is submitted before it has a chance to populate the input.
Something like :
$("#tags").autocomplete({
source: availableTags
select: function (event, ui) {
//Set the value
$(this).val(ui.item.value);
// Submit the form
$('#IDofMYform').submit();
}
});