|
JavaScript - Autocomplete To Open Link Upon Enter
Hi All,
Im a newbie when it comes to Javascript and trying to learn as I go along. I am working on an internal work site. In the site I have a text box and on entering a specific code I want it to open a new page that links to a document that has the same name. ie. if user types red, I want it to find the document red.html in a folder. To make my colleagues job easier, I want the text box to autocomplete. Below is a section of the code I plan to use Code: <script> var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"]; </script> </head> <body> <h2>Autocomplete Textbox Example</h2> <p>Type in a color in lowercase:<br /> <input type="text" value="" id="txt1" onkeypress="return autocomplete(this, event, arrValues)" /></p> </body> </html>Can anyone help me to modify this to: 1) link the text entered to the document I want opened 2) open this document upon 'enter' pressed If anyone can provide help it will be greatly appreciated. Thanks Glen Similar TutorialsHi there Im a relative newbie and am trying to have a searchbar that users can complete, with the text entry being from a pre-defined list. The hope is that a new page will open with the link that relates to the search bar entry. Im using an Autocomplete code but cant work out how to get the link part to work. See below code Code: <html>
<head>
<script src="jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "092 610 343 505 Utilities".split(" ");
$("#example").autocomplete(data);
});
var data = [ {text:'Link A', url:'/page2'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
formatItem: function(item) {
return item.text;
}
}).result(function(event, item) {
location.href = item.url;
});
</script>
</head>
<body>
Number: <input id="example" /><p></p>
</body>
</html>
Can someone help me complete this code? For example, how can I change the code so that a text entry of "092" opens "www.google.com" when I hit enter after text entry? Your help with this is greatly appreciated Glen Hi everyone. I'm 100% not a programmer so I need some help with this issue. We have a page for an e-mail newsletter sign up form. The site is built in Joomla. My question : is it possible for a URL link (from say, an email) to send a user to this sign up form and also to fill in a hidden value called channelmemberID? The code is
Code: <input type=hidden name="ChannelMemberID" value="101369"> and I would like to be able to change the value 101369 to anything else. Code samples would be generous and greatly appreciated. The sign up page is here temporarily hosted here http://seoul.directrouter.com/~dancker/?Itemid=82 My problem is the following. I have an editable <div>: <div class='edit' id='divContent' name='divContent' ContentEditable>some text</div> If I press 'enter' two lines are skipped. I know that if I press 'shift+enter' only one line will be skipped. If I check the unformatted code of the contenteditable div, 'enter' gives me <p> and 'shift+enter' gives me <br>, which makes sense because <p> is formatted differently than <br>. So I want to change 'enter' into 'shift+enter' I have already found something to capture and kill 'return' function killReturn() { key = event.keyCode; if (key == 13) return false; } But now for some means to replace the killed 'enter' with 'shift+enter'? Thanks a lot in advance for any advise! How can I let link page open using IE? for example, I open a webpage using firefox or chrome/opera/safari. when I click the link, open the link using IE <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head2" runat="server"> </head> <body> <a href="#" onClick="window.showModalDialog ('http://www.google.ca','','width=600,height=600','screenx=200','screeny=200')"><img src="images/benemanc-01th.jpg" alt="img-01" width="125" height="155" class="thumb" style="display:inline"></a> </body> </html> Many thanks T Hello folks! I don't know anything about JavaScript but I found a really cool snippet I use a lot. It will randomize images and each image can open a new link. It looks like this: ---------------------------------------------------- <script language="JavaScript" type="text/javascript"> function random_imglink(){ var myimages=new Array() myimages[1]="/img/images1.jpg" myimages[2]="/img/images2.jpg" myimages[3]="/img/images3.jpg" var imagelinks=new Array() imagelinks[1]="http://www.google.com" imagelinks[2]="http://www.yahoo.com" imagelinks[3]="http://www.alexa.com" var ry=Math.floor(Math.random()*myimages.length) if (ry==0) ry=1 document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>') } random_imglink() //--> </script> ------------------------------------------------- Now, my question is, can I link to open a document within an iFrame on my page? Please don't tell me not to use iframes or whatever, I'm not a professional, just want to see if this works. Hi this is my first post i dont know were to post it any way hope you can help me out ok the thing is that i got this script <script> alert("mesages"); document.location = "http://google.com"; </script> easy script but when you click button it takes you the the URL but i want it in a new tab plz help and sorry if this was posted in a new section i try google this but not luck I have a php page which uses the following javascript code to open another page (The users profile page) and alos carry over the userID (dUid) Code: var userProfileUrl = chatProfileUrl+dUid.replace(/_/gi,"");
document.getElementById('userdetails').innerHTML += "<span class='userinfo' onClick=\"window.open('"+userProfileUrl+"','"+dUid+"')\"><img id='profile' style='cursor:pointer;vertical-align:middle;padding-top:4px;' src=images/zoom.png> View Profile</span></br>";
I wanted to add to the menu another image link so I copied the same coding, but I do not know where to place the URL target that I want opened. I know I want the userID (dUid) also to follow this link as well. If I want the coding below to act in the same manner as the coding above, but instead open a page called /gift.php, where do I set the Url? Code: document.getElementById('userdetails').innerHTML += "<span class='userinfo' onClick=\"window.open('"+userProfileUrl+"','"+dUid+"')\"><img id='profile' style='cursor:pointer;vertical-align:middle;padding-top:4px;' src=images/gift.png> Send Gift</span></br>";
Hi guys, i hope u can help me. This is the link(and i have a function called check_group): Code: <a href="javascript:viod(0)" onclick="check_group('<?php echo $codart ?>','<?php echo $codfam ?>')"><?php echo $gname?></a>
I have a function called check group. I want to open that link in a new window. Thanks. I have two pages A and B. I have a link in the page A. I have two iframes in the page B. In practice, the link in the page A must open the page B and the link's href must open in the second iframe of the page B. Is there any script that does this? Please help me make the links below open in the "top" or "parent" frame of a window. For example, in HTML, you would use
Code: <a href="URL" target="_top">LINK</a> I just do not know how to make the links below perform in the parent window. (or even a new window if that is only possible.) Code: var $el, $tempDiv, $tempButton, divHeight = 0;
$.fn.middleBoxButton = function(text, url) {
return this.hover(function(e) {
$el = $(this).css("border-color", "white");
divHeight = $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom"));
$tempDiv = $("<div />", {
"class": "overlay rounded"
});
$tempButton = $("<a />", {
"href": url,
"text": text,
"class": "widget-button rounded",
"css": {
"top": (divHeight / 2) - 7 + "px"
}
}).appendTo($tempDiv);
$tempDiv.appendTo($el);
}, function(e) {
$el = $(this).css("border-color", "#999");
$(".overlay").fadeOut("fast", function() {
$(this).remove();
})
});
}
$(function() {
$(".widget-one").middleBoxButton("Action Games","action.htm");
$(".widget-two").middleBoxButton("Adventure Games", "adventure.htm");
$(".widget-three").middleBoxButton("Arcade Games", "arcade.htm");
$(".widget-four").middleBoxButton("Puzzle Games", "puzzle.htm");
$(".widget-five").middleBoxButton("Sport Games", "sport.htm");
$(".widget-six").middleBoxButton("Search Games", "searchgames.htm");
});
Thank you very much for your help!!! Hi, I am working with the Cut & Paste JavaScript Slideshow which you can find on http://javascriptkit.com/script/script2/jsslide.shtml . The images are linked to a page on the Internet (click on image1 to go to "page1", click on image2 to go to "page2", etc.) which is a nice feature! However, the link opens in a new window. Could anyone tell me what I have to do to 'force' the link to open in the same window (target="_self")? Thank you for your help! I really appreciate it. WWWolf - Belgium Hello, I've tried various things I've found online but cannot seem to get the right code to open the links in a drop down menu in a new window. Code: <form id="quicklinks" name="quicklinks" action="">
<select name="quicklinkitem" onchange="openWin(quicklinkitem.value)">
<option value="/lib/board.html">Select a Date</option>
<option value="/lib/boardreports/03-08-12.pdf">March 8, 2012</option>
<option value="/lib/boardreports/02-09-12.pdf">February 9, 2012</option> </select>
</form>
I appreciate any help. Elbee Code: oaktree.addItem("RC Mail", branch1, "rcmail/") //Add this item to branch2
I can open it up in the current page, but the menu is in a frame and I need to open it in a fram called "home". How can I do that~?? Hi all , I need some help in altering the location tag and the View Larger Map links to open in a new window, currently it opens in the same window. I didn't set any links myself, they were already in the code that I got from Google Maps, I placed it on my page as a custom script. I tried to edit it myself and other frames on my page got all muddle up in preview !!!!! _THE CODE_ <iframe width="350" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&ll=37.109574,-8.030563&spn=0.011328,0.022724&t=h&z=16&output=embed"></iframe><br /><small><a href="http://maps.google.com/?ie=UTF8&ll=37.109574,-8.030563&spn=0.011328,0.022724&t=h&z=16&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small> Hello Everyone. I have a bit of an issue trying to get one link to open more than one link at a time. Perhaps you can either help me or suggest a better way to do so. I have created a table with hidden rows until a user clicks an open in either cell. Once the user clicks a cell, the next row of opens opens up. What I am having trouble with is getting the table headings to be opened once hidden. Each set of options needs a title or question for the user to understand what choices to make. (these are the td's with colspan of 2) I am using javascript to show and hide the cells I have so far, and I can hide them just fine, I just want to show both sets of cells once the user clicks one link. its a bit complicated because i have functions all over the place Any help you give me would be greatly appreciated. Alternatively, I can be reached on Y!: tmdela Here's the code...: <html> <head> <script language="JavaScript"> function showCell() { document.getElementById('cellName').style.visibility='visible'; } function showCell2() { document.getElementById('cellName2').style.visibility='visible'; } function showCell3() { document.getElementById('cellName3').style.visibility='visible'; } function showCell4() { document.getElementById('cellName4').style.visibility='visible'; } function showCell5(){ document.getElementById('cellName5').style.visibility='visible'; } function showCell6(){ document.getElementById('cellName6').style.visibility='visible'; } function DoAllThese12(){ showCell(); showCell2(); showCellHeader(); } function DoAllThese34(){ showCell3(); showCell4(); } function DoAllThese56(){ showCell5(); showCell6(); } </script> <!--------------------------------CSS begins here, hides the table--> <style type="text/css"> #cellName {visibility:hidden; } #cellName2 {visibility:hidden; } #cellName3 {visibility:hidden; } #cellName4 {visibility:hidden; } #cellName5 {visibility:hidden; } #cellName6 {visibility:hidden; } body{ font-family:Arial, Calibri, Sans-serif; font-size: 15px; } a{ font-family: Arial, Calibri, Sans-Serif; font-size: 11px; color:#000; } a:link{text-decoration:none} a:visited{text-decoration:none; color:#000;} a:active{text-decoration:none} a:hover{text-decoration:none;} a:visited { color: #000; } #container{ position:absolute; margin:0 auto; left: 30%; top:0px; } #maincontent{ width: 420px; margin: 0 auto; } #table{ margin:0 auto; width: 450px; } td { width: 50%; border:0px; } .pane-list { margin: 0; padding: 0; list-style: none; } .pane-list li { background: #f9dfec; padding: 10px 20px 2px; border-top: solid 2px #FF0066; cursor: pointer; } .pane-list li:hover { background: #F6A8B6; } </style> </head> <!--------------------------------------------body--> <body> <div id="container"> <div id="maincontent"> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua </p> <BR> </div><!--maincontent--> <!-------------------------------------Container for table--> <div id="menu"> <!-------------------------------------Line 1 of table: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua?--> <div id="table"> <center> <table border="0" id="table"> <tr> <td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua? </td> </tr> <td> <ul class="pane-list"> <li> <h3> <a href="#" onclick="DoAllThese12()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</p> </a> </h3> </li> </ul> </td> <td> <ul class="pane-list"> <li> <h3> <a href="http://www.google.com">My cancer has spread. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</p> </a> </h3> </li> </ul> </td> </tr> <!------------------------------------Line 2 of Table: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua--> <tr> <td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua? </td> </tr> <td id="cellName"> <ul class="pane-list"> <li> <h3> <a href="#" onclick="DoAllThese34()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a> </h3> </li> </ul> </td> <td id="cellName2"> <ul class="pane-list"> <li> <h3> <a href="http://www.google.com">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a> </h3> </li> </ul> </td> </tr> <!------------------------------------Line 3 of Table: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua--> <tr> <td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua? </td> </tr> <tr> <td id="cellName3"> <ul class="pane-list"> <li> <h3> <a href="#" onclick='DoAllThese56()'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a> </h3> </li> </ul> </td> <td id="cellName4"> <ul class="pane-list"> <li> <h3> <a href="#" onclick="DoAllThese56()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a> </h3> </li> </ul> </td> </tr> </table> </center> </div><!--table--> </div><!--menu--> </div><!--container--> </body> </html> I have a map with hotspots, and when you hover over a hot spot, a hidden DIV appears. Thanks to my favorite coding forum, this one, I was able to successfully accomplish this first bit of code. The only problem I'm having now is getting the DIV to remain open while I move my mouse from the hotspot to the DIV. As soon as I move my mouse away from the hotspot, the DIV disappears. I need to put links in the DIVs, and users will need to be able to move their mouse away from the hotspot to click on the link, but currently can't. I experimented with setTimeout, but didn't get too far. If anyone could help me, I'd appreciate it. I really need to get this working. Code: <img src="images/map.png" alt="" usemap="#map"/> <map id="map" name="map"> <area shape="rect" coords="211,84,225,97" href="#" alt=""/> <area shape="rect" coords="226,78,240,92" href="#" alt=""/> <area shape="rect" coords="353,66,376,89" href="#" alt=""/> </map> <div id="hidden"> <div class="location" style="left:25px; top:-290px;"> <img src="images/location01.jpg" alt=""/> </div> <div class="location" style="left:25px; top:-275px;"> <img src="images/location02.jpg" alt=""/> </div> <div class="location" style="left:275px; top:-285px;"> <img src="images/location03.jpg" alt=""/> </div> </div> <!-- #hidden --> Code: function show(which) {
var area = document.getElementById("map").getElementsByTagName("area");
var locations = document.getElementById("hidden").getElementsByTagName("div");
for (var a=0; a < area.length; ++a) {
if(area[a] == which) locations[a].style.display="block";
}
}
function hide() {
var locations = document.getElementById("hidden").getElementsByTagName("div");
for (var d=0; d < locations.length; ++d) {
locations[d].style.display="none";
}
}
function init() {
var area = document.getElementById("map").getElementsByTagName("area");
for (var a=0; a < area.length; ++a) {
area[a].onmouseover = function() { show(this); }
area[a].onmouseout = hide;
}
}
window.onload = init;
So I found this code and I've manipulated it a little bit for what I want. It was designed to autocomplete an input field when countries were typed, but I changed the values to match ingredients or cooking terms, etc. I was wondering if it would be possible through javascript to autcomplete a word after one is already typed in the input field. For instance, if one person types an 'f' into the input field it will suggest 'flour' as an autocomplete, but if the person types 'f' again, it will not perform the same autocomplete function. How would you go about doing that? Thank you! Code: <head>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Timothy Groves | http://www.brandspankingnew.net/ */
countries = new Array(
"flour",
"cup",
"tsp.",
"tbsp.",
"lb.",
"pound",
"tablespoon",
"teaspoon",
"sugar",
"olive oil",
"vegetable oil",
"gallon",
"quart",
"qt."
);
var sug = "";
var sug_disp = "";
function getCountry() {
var input = document.forms['address_frm'].country.value;
var len = input.length;
sug_disp = ""; sug = "";
if (input.length) {
// get matching country from array
for (ele in countries)
{
if (countries[ele].substr(0,len).toLowerCase() == input.toLowerCase())
{
sug_disp = input + countries[ele].substr(len);
sug = countries[ele];
break;
}
}
}
document.forms['address_frm'].sug_country.value = sug_disp;
if (!sug.length || input == sug_disp)
document.getElementById('sug_btn').style.display = "none";
else
document.getElementById('sug_btn').style.display = "block";
}
function setCountry() {
document.forms['address_frm'].country.value = sug;
hideSug();
}
function hideSug() {
document.forms['address_frm'].sug_country.value = "";
document.getElementById('sug_btn').style.display = "none";
}
</script>
</head>
<body>
<div style="width: 202px; margin: 100px auto 0 auto;">
<form name="address_frm">
<div></a>
<div style="position: relative; margin: 5px 0 5px 0; height: 30px;">
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 1;">
<input type="text" name="sug_country" style="background-color: #fff; border: 1px solid #999; width: 200px; padding: 2px" disabled />
</div>
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 2;">
<input autocomplete="off" type="text" name="country" style="background: none; color:#000; border: 1px solid #999; width: 200px; padding: 2px" onfocus="getCountry()" onkeyup="getCountry()" />
</div>
<div id="sug_btn" style="position: absolute; top: 2px; right: 5px; z-index: 4; display:none;">
<p onclick="setCountry()" style="cursor:pointer">></p>
</div>
</div>
</form>
</div>
</div>
</body>
How do I fix the problem that autocomplete does not validate, I have heard before that there is a dirty way to do this but did not want to do this before, but now feel i must as my boss wants the site error free ! does anyone know how I do this ? Hi So, I have a working single autocomplete function, but I want to use the same function on different fields.... this is my code: Code:
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<div>
<form>
<script type="text/javascript">
var index = '1';
</script>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
I know the id's are the same in this, but I tried changing them and it still seems to make little difference.. I did wonder if I could add something variable to the id's and pass that in the function call, but could not figure it out.... the above gives me autocomplete on two fields, but will only fill one of them... Any suggestions would be appreciated Hello, I have a problem with autocomplete of jQuery. Here is my code Code: $('input#recipient').autocomplete ({
source: function (request, callback) {
var dataString = {username : request.username};
$.ajax({
url: url.root + 'email/',
data: dataString,
//cache: false,
complete: function(xhr, result) {
if(result != 'success') return;
var response = xhr.responseText;
var usernameList = [];
$(response).filter('li').each (function() {
usernameList.push($(this).text());
)};
callback(usernameList);
}
});
}
});
Can you tell me what's the problem Thank you |
|||||||