I am writing autocomplete input control from scratch using javascript and jquery. I know I can use the jquery autocomplete. But then there won't be any fun.
The autocomplete I have so far shows suggestions but I am not able to select the suggestions using mouse. How can I do this?
The code I have so far is following html,
<div class="sug">
<input type="text" id="auto" onkeyup="display(event)" onblur="hide()" autocomplete="off" />
<div class="suggestion" id="suggestion">
</div>
</div>
and following is the style sheet
<style>
.suggestion
{
border:solid 2px black;
}
.sug > .suggestion
{
display:none;
}
.sug > .suggestion,#auto
{
width:100px;
}
}
</style>
and my javascript code is following
<script type="text/javascript">
var array = new Array();
array.push("heena");
array.push("bhawin");
array.push("aruna");
array.push("mahesh");
array.push("anshul");
array.push("jagruti");
array.push("neha");
array.push("sherry");
array.push("sonali");
var data;
var id; //for providing id to each div
function display(e)
{
if (e.keyCode == 38 || e.keyCode == 40)
{
selectit(e);
}
data = "";
id = 0;
var state = $('#auto').val();
if (state == "")//value empty
{
$('.suggestion').css({ display: "none" });
}
else
{
for (var i = 0; i < array.length; i++)
{
var key = 0;
for (j = 0; j < state.length; j++)
{
//for the matching of the array element with the text in the textbox
if (array[i][j] == state[j])
{
key++;
}
}
//putting the matched array element in a div
if (key == state.length)
{
//the whole array will be copied with the bold values inserted
var bolde = "";
for (var k = 0; k < key; k++)
{
bolde += "" + array[i][k] + "";
}
for (var l = key; l < array[i].length; l++)
{
bolde += array[i][l];
}
id++;
data += "<div id='" + id + "'>" + bolde + "</div>";
}
}
$('.suggestion').html(data);
$('.suggestion').css({ display: "block" });
selectit(e);
if (data == "")
{
$('.suggestion').css({ display: "none" });
}
}
}
function hide()
{
$('#suggestion').css({ display: "none" }); ;
}
function selectit(e)
{
var child = document.getElementById("suggestion").childNodes;
for (var i = 0; i < child.length; i++)
{
if (child[i].id == "1")
{
child[i].style.color = "red"; //here is the problem in the code
}
}
}
</script>
Thanks
there was two problems
ONE :
you need to take off the hide(); from onblur
<div class="sug">
<input type="text" id="auto" onkeyup="display(event)" autocomplete="off" /><!--i changed here to Note the on blur-->
<div class="suggestion" id="suggestion">
</div>
</div>
TWO : set the onclick of the div and use hide(); in it
<script>
var array = new Array();
array.push("heena");
array.push("bhawin");
array.push("aruna");
array.push("mahesh");
array.push("anshul");
array.push("jagruti");
array.push("neha");
array.push("sherry");
array.push("sonali");
var data;
var id;
function display(e)
{
if (e.keyCode == 38 || e.keyCode == 40)
{
selectit(e);
}
data = "";
id = 0;
var state = $('#auto').val();
if (state == "")
{
$('.suggestion').css({ "display": "none" });
}
else
{
for (var i = 0; i < array.length; i++)
{
var key = 0;
for (j = 0; j < state.length; j++)
{
if (array[i][j] == state[j])
{
key++;
}
}
if (key == state.length)
{
var bolde = "";
for (var k = 0; k < key; k++)
{
bolde += "" + array[i][k] + "";
}
for (var l = key; l < array[i].length; l++)
{
bolde += array[i][l];
}
id++;
data += '<div id="' + id + '" onclick="$(\'#auto\').val(this.innerHTML);hide();" >' + bolde + "</div>";// i changed here note the on click
}
}
$('.suggestion').html(data);
$('.suggestion').css({ "display": "block" });
selectit(e);
if (data == "")
{
$('.suggestion').css({ "display": "none" });
}
}
}
function hide()
{
$('#suggestion').css({ "display" : "none" }); ;
}
function selectit(e)
{
var child = document.getElementById("suggestion").childNodes;
for (var i = 0; i < child.length; i++)
{
if (child[i].id == "1")
{
child[i].style.color = "red";
}
}
}
</script>
Related
i am trying to make something fancy like this create button and shift values, so far i have reached till here FIDDLE
$("#submit").click(function() {
var n = $('#txtinp').val();
if ($.isNumeric(n)) {
//alert(n);
var btns = $('#btns');
for (var i = 1; i <= n; i++) {
btns.append('<input type="button" id="b' + i + '" value="' + i + '"/>');
}
} else {
alert("enter a number");
}
$("input[type='button']").click(function(e) {
var idClicked = e.target.id;
//alert($(this).attr("value"));
if (idClicked == 'b1' && $(this).attr("value") == 1) {
$(this).prop('value', n);
var lastBtn = 'b' + n;
for (var i = n; i > 1; i--) {
$('#b' + i).prop('value', i - 1);
}
} else {
var lastBtn = 'b' + n;
for (var i = n; i >= 1; i--) {
if ('b' + i == 'b1' && 'b' + n == n) {
$('#b' + i).prop('value', i);
} else {
$('#b' + i).prop('value', i - 1);
}
}
}
});
});
I am able to shift only once if clicked on very first created button, but the function or event does not work on second and further clicks. I have no prior Jquery experience, what is that i am doing wrong here?
please do not down vote if the question is too stupid.
thanks in advance
Here's one possible solution:
$(document).ready(function() {
$("#submit").click(function() {
var n = $('#txtinp').val();
if ($.isNumeric(n)) {
var btns = $('#btns').empty();
for (var i = 1; i <= n; i++) {
btns.append($('<button>').text(i));
}
} else {
alert("enter a number");
}
$("#btns button").click(function(e) {
var buttons = $('#btns button');
buttons.each(function () {
var currentValue = parseInt($(this).text());
var newValue = currentValue - 1;
if (newValue === 0) {
newValue = buttons.length;
}
$(this).text(newValue);
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtinp" />
<input type="button" id="submit" value="Submit" />
<div id="btns">
</div>
I need to hide rows until they are clicked. I didn't initially write the code and I was having hard time fixing the issues. It's for an advanced order form for a private jet company. The form is supposed to have only 2 visible legs and then you'll be able to click on add a leg button to add a leg, instead it shows 15 legs.
jQuery(document).ready(function () {
jQuery('.trip-type').change(function () {
if (jQuery(this).val() == "multi-leg") {
jQuery("#addleg").css("display", "block").hide().end();
for (var i = 2; i <= 3; i++) {
jQuery('.to_leg_' + i).val('');
jQuery('.to_leg_' + i).attr('data-code', "");
jQuery('.to_leg_' + i).attr('data-name', "");
jQuery('.to_leg_' + i).attr('data-real-city', "");
jQuery('.to_leg_' + i).attr('data-country', "");
jQuery('.to_leg_' + i).attr('data-latitude', "");
jQuery('.to_leg_' + i).attr('data-longitude', "");
}
for (var n = 3; i <= 5; i++) {
jQuery('.from_leg_' + i).val('');
jQuery('.from_leg_' + i).attr('data-code', "");
jQuery('.from_leg_' + i).attr('data-name', "");
jQuery('.from_leg_' + i).attr('data-real-city', "");
jQuery('.from_leg_' + i).attr('data-country', "");
jQuery('.from_leg_' + i).attr('data-latitude', "");
jQuery('.from_leg_' + i).attr('data-longitude', "");
}
var allElements = jQuery('#multileg-block').find("div.row");
for (var i = 0; n < allElements.length; i++) {
if (jQuery(allElements[i]).hasClass("non-one-way") === true) {
jQuery(allElements[i]).removeClass('non-one-way');
jQuery(allElements[i]).removeClass(i);
jQuery(allElements[i]).css("display", "none");
jQuery(allElements[i]).attr('attribute', "");
}
}
var trelements = jQuery('#multi-table').find("tbody tr.multileg-table");
for (var i = 1; i < trelements.length; i++) {
if (jQuery(trelements[i]).hasClass('non-one-way') === true) {
jQuery(trelements[i]).removeClass("non-one-way");
jQuery(trelements[i]).css("display", "none");
jQuery(trelements[i]).attr('attribute', "");
}
}
$('.info-distances tbody tr.multileg-info:eq(0)').addClass('non-one-way');
} else {
jQuery("#addleg").css("display", "none");
jQuery('.info-distances tbody tr:eq(1)').removeClass('non-one-way');
var mutrelements = jQuery('.info-distances').find("tbody tr.multileg-info");
for (var i = 1; i < mutrelements.length; i++) {
if (jQuery(mutrelements[i]).hasClass('non-one-way') === true) {
jQuery(mutrelements[i]).removeClass("non-one-way");
}
}
}
});
jQuery('#addleg').on("click", function () {
var allElements = jQuery('#multileg-block').find("div.row");
for (var i = 0; i < allElements.length; i++) {
if (jQuery(allElements[i]).hasClass("non-one-way") == false) {
jQuery(allElements[i]).addClass('non-one-way');
jQuery(allElements[i]).addClass(i);
jQuery(allElements[i]).css("display", "block");
jQuery(allElements[i]).attr('attribute', i);
break;
}
}
var trelements = jQuery('#multi-table').find("tbody tr.multileg-table");
for (var i = 0; i < trelements.length; i++) {
if (jQuery(trelements[i]).hasClass('non-one-way') === false) {
jQuery(trelements[i]).addClass("non-one-way");
jQuery(trelements[i]).css("display", "table-row");
jQuery(trelements[i]).attr('attribute', i);
break;
}
}
var mutrelements = jQuery('.info-distances').find("tbody tr.multileg-info");
for (var i = 1; i < mutrelements.length; i++) {
if (jQuery(mutrelements[i]).hasClass('non-one-way') === false) {
jQuery(mutrelements[i]).addClass("non-one-way");
break;
}
}
});
jQuery('.Leg_remove').on("click", function () {
jQuery(this).parent().parent().css('display', 'none');
jQuery(this).parent().parent().removeClass('non-one-way');
index = parseInt(jQuery(this).parent().parent().attr('attribute'));
jQuery('.non-one-way[attribute=' + index + ']').removeClass('non-one-way').css('display', 'none');
index += 2;
jQuery('.info-distances tbody tr:eq(' + index + ')').removeClass('non-one-way');
});
}); < /script>
I am trying to display the sum of transaction at the bottom of the page.
function doTotal() {
var Stuff = document.getElementsByTagName("input");
var theTotal = new Number(0);
for (var i = 0; i < Stuff.length; i++) {
if (Stuff[i].getAttribute('type') == 'text') {
if ((Stuff[i].value != '') && (IsNumeric(Stuff[i].value) == true) && (Stuff[i].name.substr(0, 8) == 'txtValue')) {
theTotal = theTotal + parseFloat(Stuff[i].value);
}
}
}
document.getElementById("tdTotal").innerHTML = "R " + theTotal.toFixed(2);
frm.txtTotal.value = theTotal.toFixed(2);
//alert(theTotal);
}
EDIT:
Ofc Im stupid, it cant work since value from input is always string. So I change the condition. Now it should work:
function doTotal() {
var stuff = document.getElementsByTagName("input");
var theTotal = 0;
for (var i = 0; i < stuff.length; i++) {
if (stuff[i].getAttribute('type') == 'text') {
if ((stuff[i].value != '') && !isNaN(stuff[i].value) && (typeof stuff[i].name.substr(0, 8) === "string")) {
theTotal += parseFloat(stuff[i].value);
}
}
}
// document.getElementById("tdTotal").innerHTML = "R " + theTotal.toFixed(2);
// frm.txtTotal.value = theTotal.toFixed(2);
alert(theTotal);
}
Try it there: http://jsfiddle.net/windkiller/9dvRS/
EDIT2:
Debug it, so you can see what condition didnt pass wrong:
function doTotal() {
var stuff = document.getElementsByTagName("input");
var theTotal = 0;
var i = 0;
alert(stuff[i].getAttribute('type') == 'text');
alert(stuff[i].value != '');
alert(!isNaN(stuff[i].value));
alert(typeof stuff[i].name.substr(0, 8) === "string");
}
I am trying to implement a textbox autocomplete
and here is the code
HTML
<div class="sug">
<input type="text" id="auto" onkeyup="display(event)" onblur="hide()" autocomplete="off"/>
<div class="suggestion" id="suggestion">
</div>
</div>
CSS
.suggestion {
border: solid 2px black;
}
.sug > .suggestion {
display: none;
}
.sug > .suggestion, #auto {
width: 100px;
}
JavaScript
var array = new Array();
array.push("heena");
array.push("bhawin");
array.push("aruna");
array.push("mahesh");
array.push("anshul");
array.push("jagruti");
array.push("neha");
array.push("sherry");
array.push("sonali");
var data;
var id;//for providing id to each div
function display(e) {
if (e.keyCode == 38 || e.keyCode == 40) {
selectit(e);
}
data = "";
id = 0;
var state = $('#auto').val();
if (state == "")//value empty
{
$('.suggestion').css({display: "none"});
}
else {
for (var i = 0; i < array.length; i++) {
var key = 0;
for (j = 0; j < state.length; j++) {
//for the matching of the array element with the text in the textbox
if (array[i][j] == state[j]) {
key++;
}
}
//putting the matched array element in a div
if (key == state.length) {
//the whole array will be copied with the bold values inserted
var bolde = "";
for (var k = 0; k < key; k++) {
bolde += "<b>" + array[i][k] + "</b>";
}
for (var l = key; l < array[i].length; l++) {
bolde += array[i][l];
}
id++;
data += "<div id='" + id + "'>" + bolde + "</div>";
}
}
$('.suggestion').html(data);
$('.suggestion').css({display: "block"});
if (data == "") {
$('.suggestion').css({display: "none"});
}
}
}
function hide() {
$('#suggestion').css({display: "none"});
;
}
function selectit(e) {
var child = document.getElementById("suggestion").childNodes;
for (var i = 0; i < child.length; i++) {
if (child[i].id == "1") {
child[i].style.color = "red"; //here is the problem in the code
}
}
}
In the code I want to make the first suggestion color red on down key press
but the color is not showing
The last comment is the region where the problem is.
The issue you are having is with the fact that you are setting the color to red and then after you return from the selectit function you are continuing down the display function and are replacing the value in .suggestion on this line:
$('.suggestion').html(data);
So at this point you remove the formatting you have just set in selectit.
If all you are trying to do is set the color based on the key selection then you should change this:
if (e.keyCode == 38 || e.keyCode == 40) {
selectit(e);
}
to:
if (e.keyCode == 38 || e.keyCode == 40) {
selectit(e);
return;
}
Your
function selectit(e)
function wasn't working properly (because of e.keyCode, I think).
Here's working fiddle
why not use Jquery UI? Its well tested and trusted : Reference
I get the message Validation Failed if any of my controls are empty, but I would want to display the names of the controls which are empty. These controls are dynamically created on the page.
Below is the code that I am using now
function validateinput() {
var arrTextBox = document.getElementsByTagName("input");
var ddlTextBox = document.getElementsByTagName("select");
var retVal = 1;
for (i = 0; i < arrTextBox.length; i++) {
if (arrTextBox[i].type == "text" && arrTextBox[i].getAttribute("IsMandatory") == "Y" && arrTextBox[i].value == ""){
retVal = 0;
}
}
for (j = 0; j < ddlTextBox.length; j++) {
if (ddlTextBox[j].getAttribute("IsMandatory") == "Y" && ddlTextBox[j].value == "") {
retVal = 0;
}
}
if (retVal == 0) {
alert("Validation Failed");
return false;
}
else {
alert("Validation Success");
return true;
}
}
Okay, I see from the comments that you need some more specific assistance. Try this:
function validateinput() {
var emptySelects = '';
var emptyTextboxes = '';
var arrTextBox = document.getElementsByTagName("input");
var ddlTextBox = document.getElementsByTagName("select");
var retVal = 1;
for (i = 0; i < arrTextBox.length; i++) {
if (arrTextBox[i].type == "text" && arrTextBox[i].getAttribute("IsMandatory") == "Y" && arrTextBox[i].value == ""){
retVal = 0;
emptyTextboxes+= ' ' + arrTextBox[i].name;
}
}
for (j = 0; j < ddlTextBox.length; j++) {
if (ddlTextBox[j].getAttribute("IsMandatory") == "Y" && ddlTextBox[j].value == "") {
retVal = 0;
emptySelects += ' ' + ddlTextBox[j].name;
}
}
if (retVal == 0) {
alert("Validation Failed");
if (emptyTextboxes != '') alert('The following textboxes are empty:' + emptyTextboxes);
if (emptySelects != '') alert('The following selections are empty:' + emptySelects);
return false;
}
else {
alert("Validation Success");
return true;
}
}