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
Related
Trying to change the background color of all my divs using a onkeypress event. R = Red , B=White, V=Green. When press R it works but when i press V or B it gives me the alert.
I tried without return, with a switch(actualy im supposed to do this with a switch). Teacher cancelled class today so I wasnt able to check it out with him .And I Wont see him til next week. I tried things and other things for 2-3 hours and im totaly stuck Please help.. Thanks in advance
window.onkeypress = function colorchange(x)
{
if (x.keyCode == 114)
{ var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "red";
}return;
}
if (x.keycode == 118)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "green";
}return;
}
if (x.keycode == 98)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "white";
}return;
}
else
{
alert("this key doesnt do anything")
}
}
}
The variables are case-sensitive. You have keycode and it should be keyCode. Looks like you should also be using else if().
window.onkeypress = function colorchange(x) {
if (x.keyCode == 114) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "red";
}
return;
} else if (x.keyCode == 118) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "green";
}
return;
} else if (x.keyCode == 98) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "white";
}
return;
} else {
alert("this key doesnt do anything")
}
}
body {
background: #eee;
}
div {
width: 100px;
height: 100px;
background: #aaa;
}
<div></div>
You are comparing x.keycode instead of x.keyCode in the second and third if statements. You should also chain the conditions using else if.
window.onkeypress = function colorchange(x)
{
if (x.keyCode === 114) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "red";
}
return;
}
else if (x.keyCode === 118)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "green";
}
return;
}
else if (x.keyCode === 98)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "white";
}
return;
}
else
{
alert("this key doesnt do anything")
}
}
See working jsfiddle here.
The code seems right to me but when i try to move the div with class ai using the key 'A' and 'Q' it doesn't work , it work only with the div which have the class player when hitting up and down arrow :
LIVE DEMO
JavaScript :
var playerPosition = 0,
playerPosition2 = 0;
window.onkeydown = function(e) {
var key = e.keyCode ? e.keyCode : e.which;
if(key == 40) { // up arrow
playerPosition += 5;
} if(key == 38) { // down arrow
playerPosition -= 5;
}
if(key == 113) { // q buttton
playerPosition2 += 5;
} if(key == 97) {
playerPosition2 -= 5; // a button
}
var players1 = document.getElementsByClassName('player');
for(var i = 0; i < players1.length; i++) {
if (playerPosition < 0) {
playerPosition = 0;
}
else if (playerPosition > 330) {
playerPosition = 330;
}
players1[i].style.top = playerPosition + "px";
}
var players2 = document.getElementsByClassName('ai');
for(var i = 0; i < players2.length; i++) {
if (playerPosition2 < 0) {
playerPosition2 = 0;
}
else if (playerPosition > 330) {
playerPosition2 = 330;
}
players2[i].style.top = playerPosition2 + "px";
}
}
Not sure where you got those keyCode values
a = 65
q = 81
http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
I'm using dropdowncheckboxlist, where we can select multiple values and my question is how to again check the checkbox inside dropdownCheckList based on database values. That is, I have to check multiple values while editing or updating the values. I'm using this script:
<script type="text/javascript">
$(document).ready(function () {
$("#ContentPlaceHolder1_dropdown").dropdownchecklist({
forceMultiple: true
, onComplete: function (selector) {
var values = "";
for (i = 0; i < selector.options.length; i++) {
if (selector.options[i].selected && (selector.options[i].value != "") ) {
if (values != "") values += ",";
values += selector.options[i].value;
}
}
// alert(values);
$('#<%= hidVisitorID.ClientID %>').val(values);
}
, onItemClick: function (checkbox, selector) {
var justChecked = checkbox.prop("checked");
var checkCount = (justChecked) ? 1 : -1;
for (i = 0; i < selector.options.length; i++) {
if (selector.options[i].selected) checkCount += 1;
}
if (checkCount > 9) {
alert("Industry Limit is 9");
throw "too many";
}
}
}
</script>
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>
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");
}