Good day! I have a form that enables a user to dynamically add and remove input text fields.
Each text field should suggest some values or autocomplete. Adding and removing fields are successful. However, only the first text field autosuggests.
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = #Html(Json.toJson(tagNames).toString);
var scntDiv = $('#addMore');
var i = $('#addMore p').size() + 1;
$('#addRT').live('click', function() {
$('<p><label for="tags"><input id="tags" type="text" name="relatedTags.tag.name" placeholder="Name"/></label> Remove</p>',
function() {
$( "#tags" ).autocomplete({
source: availableTags
});
}).appendTo(scntDiv);
i++;
return false;
});
$('#remRT').live('click', function() {
if( i > 1 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
$(function() {
var availableTags = #Html(Json.toJson(tagNames).toString);
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
But the same problem persists. Please help me figure this out. Thank you very much!
Following my comments, this should solve at least your autocomplete function. The ID is dynamically created by using the iterator you already had in your code.
$('#addRT').live('click', function() {
$('<p><label for="tags"><input id="tags'+i+'" type="text" name="relatedTags.tag.name" placeholder="Name"/></label> Remove</p>').appendTo(scntDiv);
$( "#tags"+i ).autocomplete({
source: availableTags
});
i++;
return false;
});
Related
So i'v found this code to search other pages from the main page of my website, and it works great, but the autocomplete shows the link of the page instead of the title of the page , can anyone help me to modify the code ?
<form id="form1" runat="server" class="online-form">
<div class="ui-widget">
<input id="tags" class="form-control" placeholder="Rechercher un service…" required="" />
</div>
</form>
<script>
$(function () {
var availableTags = ["page1.html","page2.html","page3.html"];
$("#tags").autocomplete({
source: availableTags,
select: function (e, ui) {
var value = ui.item.value;
window.location.href = "../" + value;
},
});
});
</script>
The best way to make what you want and still continuing using jQuery's autocomplete is to create an additional array with the links. On select we will check the position of the AvailableTags array and then use the new array for the redirect.
<script>
$(function () {
var availableTags = ["Page 1", "Page 2"];
var availableTagsLinks = ["page1.htm", "page2.htm"];
$("#tags").autocomplete({
source: availableTags,
select: function (e, ui) {
var value = ui.item.value;
var indexPos = $.inArray(ui.item.value, availableTags);
window.location.href = "../" + availableTagsLinks[indexPos];
},
});
});
</script>
I have this problem when I'm trying to display a number of fields (tests, date, time), and onclick on those datepicker is supposed to run and disable the past dates, if I put the code outside the JavaScript it works just fine, so there must be something wrong with how I $.each loop it or with the append, but somehow I am not getting it to work
<script type = "text/javascript" >
$(document).ready(function() {
$("#select_test").change(function() {
var optionVal = [];
$.each($("#select_test option:selected"), function() {
if ($.inArray($(this).text(), optionVal) == -1) {
optionVal.push($(this).text());
}
});
var myselect = $('<select>');
var mydiv = $('<div>');
$.each(optionVal, function(index, key) {
mydiv.append("<tr><td><h5 class='wizard-title'>" + key + "</h5></td><td> <div class='col-sm-10'><div class='input-group date' data-provide='datepicker' data-date-format='dd-mm-yyyy'><input type='text' class='form-control datepicker dates' id='data-date' placeholder='Enter Test Date' name='testdate[]' value=''><div class='input-group-addon'><span class='glyphicon glyphicon-th'></span></div></div></div></td><td><div class='col-sm-12'><select name='testtime[]' class='form-control'><option value=''>Select Time</option><option value='0:00'>0:00</option><option value='1:00'>1:00</option><option value='2:00'>2:00</option><option value='3:00'>3:00</option><option value='4:00'>4:00</option><option value='5:00'>5:00</option><option value='6:00'>6:00</option><option value='7:00'>7:00</option><option value='8:00'>8:00</option><option value='9:00'>9:00</option><option value='10:00'>10:00</option><option value='11:00'>11:00</option><option value='12:00'>12:00</option><option value='13:00'>13:00</option><option value='14:00'>14:00</option><option value='15:00'>15:00</option><option value='16:00'>16:00</option><option value='17:00'>17:00</option><option value='18:00'>18:00</option><option value='19:00'>19:00</option><option value='20:00'>20:00</option><option value='21:00'>21:00</option><option value='22:00'>22:00</option><option value='23:00'>23:00</option></select></div></td></tr>");
});
$('#testsdetails').empty().append(mydiv.html());
});
});
</script>
I have called datepicker in below script.
<script>
$(document).on('click', '.dates', function() {
var dateToday = new Date();
$(this).datepicker({
minDate: 0
}).focus();
$(this).removeClass('datepicker');
});
</script>
I have been unable to replicate an issue with the code you provided.
$(document).ready(function() {
$("#select_test").change(function() {
var optionVal = [];
$.each($("#select_test option:selected"), function() {
if ($.inArray($(this).text(), optionVal) == -1) {
optionVal.push($(this).text());
}
});
var myselect = $('<select>');
var mydiv = $('<div>');
$.each(optionVal, function(index, key) {
mydiv.append("<tr><td><h5 class='wizard-title'>" + key + "</h5></td><td> <div class='col-sm-10'><div class='input-group date' data-provide='datepicker' data-date-format='dd-mm-yyyy'><input type='text' class='form-control datepicker dates' id='data-date' placeholder='Enter Test Date' name='testdate[]' value=''><div class='input-group-addon'><span class='glyphicon glyphicon-th'></span></div></div></div></td><td><div class='col-sm-12'><select name='testtime[]' class='form-control'><option value=''>Select Time</option><option value='0:00'>0:00</option><option value='1:00'>1:00</option><option value='2:00'>2:00</option><option value='3:00'>3:00</option><option value='4:00'>4:00</option><option value='5:00'>5:00</option><option value='6:00'>6:00</option><option value='7:00'>7:00</option><option value='8:00'>8:00</option><option value='9:00'>9:00</option><option value='10:00'>10:00</option><option value='11:00'>11:00</option><option value='12:00'>12:00</option><option value='13:00'>13:00</option><option value='14:00'>14:00</option><option value='15:00'>15:00</option><option value='16:00'>16:00</option><option value='17:00'>17:00</option><option value='18:00'>18:00</option><option value='19:00'>19:00</option><option value='20:00'>20:00</option><option value='21:00'>21:00</option><option value='22:00'>22:00</option><option value='23:00'>23:00</option></select></div></td></tr>");
});
$('#testsdetails').empty().append(mydiv.html());
});
$(document).on('click', '.dates', function() {
var dateToday = new Date();
$(this).datepicker({
minDate: 0
}).focus();
$(this).removeClass('datepicker');
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<select id="select_test">
<option></option>
<option>1</option>
</select>
<div id="testsdetails"></div>
If you're still having an issue, please comment and provide more details. Let us know if you see any errors from Console. I suspect that this is a BootStrap page based on your HTML.
Hope that helps.
We are trying to implement non-editable jQuery auto-complete. For example when user selects value from auto-complete they not able to modify it. But when they press backspace old value is deleted and again they can select new value from auto-complete.
We know there is lot's of plugin for this, But we don't want to use any plugin.
Here is our jsfiddle for normal auto-complete.
Jsfiddle
Here is the plugin which which has this functionality.
plugin
Our Code
$(document).ready(function () {
var aTags = ["ask", "always", "all", "alright", "one", "foo",
"blackberry", "tweet", "force9", "westerners", "sport"
];
$("#tags").autocomplete({
source: aTags
});
});
HTML:
<input type='text' title='Tags' id='tags' />
UPDATED: Try catching backspace then set the field to blank.If you want to set the field readonly on selection,you can do it in select of autocomplete.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).ready(function () {
var aTags = ["ask", "always", "all", "alright", "one", "foo",
"blackberry", "tweet", "force9", "westerners", "sport"
];
$("#tags").autocomplete({
source: aTags,
select: function () {
$('#tags').prop("readonly",true);
}
});
$('#tags').bind('keydown', function (event) {
if (event.keyCode === 8) {
event.preventDefault();
$('#tags').prop("value","");
$('#tags').prop("readonly",false);
}
});
});
</script>
<style>
#tags:focus {
border:1px solid #0000ff;
}
</style>
<input type='text' title='Tags' id='tags' />
FIDDLE WITH YOUR ANGULAR SCRIPT
Here is the solution for this. It's as per my requirement. May be it will help some-one.
Working Solution
HTML:-
<input id="field" type="text" placeholder="test" value="" size="50" />
<div id="output">
</div>
JS:
var readOnlyLength = $('#field').val().length;
var tmpFlag=true;
var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];
$( "#field" ).autocomplete({
source: aTags,
select: function( event, ui ) {
tmpFlag=false;
}
});
$('#output').text(readOnlyLength);
$('#field').on('keypress, keydown', function(event) {
var $field = $(this);
if(event.which==8){
$('#field').val('');
tmpFlag=true;
}
console.log(tmpFlag);
if(tmpFlag==false)
if ((event.which != 37 && (event.which != 39))
&& ((this.selectionStart < readOnlyLength)|| (this.selectionStart <= readOnlyLength) ||(this.selectionStart > readOnlyLength)
|| ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
event.preventDefault();
}
});
Try something like this:
var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];
$( "#tags" ).autocomplete({
source: aTags
});
$( "#tags" ).blur(function(){
var tag = $(this).val();
if(jQuery.inArray(tag,aTags) == -1){
// the element is not in the array
$( "#tags" ).val('');
}
});
DEMO
Here in blur function I check the input value whether in the array, if not I clear the input field.
.change() event doesn't work in Chrome when using autocomplete script and work when enter another value doesn't exist in autocomplete ...
but my code is totally working fine in Firefox
my code as the below
$('body').on('change', 'input[name^="itemNo"]', function(){
var currentquantity = $(this).val();
var maxquantity = $(this).data('maxquant');
alert(currentquantity);
alert(maxquantity);
})
and my html code as the below
<input type="text" data-type="product_serial" name="itemNo[]" data-maxquant="" id="itemNo_1" class="form-control autocomplete_txt serial_number_append" autocomplete="off">
Use the autocomplete's change event. You can bind it using the 'autocompletechange' event:
$('input[name^="itemNo"]').on( "autocompletechange", function( event, ui ) {} );
or on initialization, as in the following example:
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp"
];
$('input[name^="itemNo"]').autocomplete({
source: availableTags
}, {
change: function(event, ui) {
var currentquantity = $(this).val();
var maxquantity = $(this).data('maxquant');
alert(currentquantity);
alert(maxquantity);
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src=https://code.jquery.com/ui/1.11.2/jquery-ui.js "></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<input type="text " data-type="product_serial " name="itemNo[] " data-maxquant=" " id="itemNo_1 " class="form-control autocomplete_txt serial_number_append " autocomplete="off ">
See documentation for further information: autocomplete API
This works for me in chrome. The change event is called when the input field loses focus
$('body').on('change', 'input[name^="itemNo"]', function(){
var currentquantity = $(this).val();
var maxquantity = $(this).data('maxquant');
alert(currentquantity);
alert(maxquantity);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" data-type="product_serial" name="itemNo[]" data-maxquant="" id="itemNo_1" class="form-control autocomplete_txt serial_number_append" autocomplete="off">
Issue: The (jQuery) auto-complete works only for the first input (displayed by default). It doesn't work for additional row/s which are added using the add row function.
I have read other posts and understood that I have to use class and not id. But it still doesn't work.
I am using jquery autocomplete and some javascript to add and delete rows for a specific id.
Here is the headers:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Here is the jquery code:
jQuery(document).ready(function ($) {
/* availableTags = [
"Demo",
"Senna",
"Adam",
"Eva",
];*/
$('.autofill').autocomplete({
source:'suggest.php', minLength:2
});
});
Here is the HTML code:
<div class="content-left">
Add rows
<div id="p_scents">
<p>
<label style="margin-bottom:10px;" for="p_scnts">
<input class="autofill" type="text" id="p_scnt" size="20" name="p_scnt[]"
value="" placeholder="Enter text" />
</label>
</p>
</div>
</div>
**Here is the Javascript to add rows:**
$(function () {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').on('click', function () {
$('<p><label style="margin-bottom:10px;" for="p_scnts"><input class="autofill" type="text" name="p_scnt[]" size="20" id="p_scnt_' + i + '" value="" placeholder="Add text" /></label for="remScnt"> <label style="padding-left:400px;">Remove</label></p>').appendTo(scntDiv);
//i++;
//return false;
//Added the 5 lines below
$(function ($) {
$('#p_scnt_' + i).autocomplete({
source:'suggest.php', minLength:2
});
});
i++;
return false;
});
$('#remScnt').on('click', function () {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
So the above code is working fine. Cheers all for your help ;)
For your latest code, you've made two mistakes:
Increase the counter i before apply autocomplete to text field
Stopped the script by return false
Also, it's recommended to use .on() to replace .live() as it's deprecated in version 1.7 .
Demo: http://jsfiddle.net/indream/f8mt4/
$('#addScnt').on('click', function () {
$(...).appendTo(scntDiv);
//i++; Should not be done here
//return false; Stopped the script
//Added the 5 lines below
$(function ($) {
$('#p_scnt_' + i).autocomplete({
source: window.availableTags,
minLength: 1
});
});
i++; // should increase counter here
return false;
});
p.s. I've changed availableTags to global variable in order to make the demo works,
but I think you would use query to retrieve the tags.
$('#addScnt').live('click', function() {
.........................
$('#p_scnt_'+i).autocomplete({
source:'suggest_fill.php',
minLength:1
});
return false;
..................
});
I think it's the sequence of js file load problem.
Try to put your second file above the 1st file.
Hope it helps you.
the second $(function(){is too much. it should look like this
<script>
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function() {
$('<p><label style="margin-bottom:10px;" for="p_scnts"><input class="autofill" type="text" name="p_scnt[]" size="20" id="p_scnt_' + i +'" value="" placeholder="Add text" /></label for="remScnt"> <label style="padding-left:400px;"><img src="../../img/remove.jpg" width="" height="" class="img" alt="" title=""/></label></p>').appendTo(scntDiv);
i++;
//Added the 5 lines below
$('#p_scnt_'+i).autocomplete({
source:'suggest_fill.php',
minLength:1
});
return false;
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>