I have a webpage that has a search feature on it. The search feature page is embedded into an iFrame on the parent page. The search page also has the javascript UI Autocomplete incorporated into it. It currently works, but I've come across a few issues as mentioned below:
1. On Chrome and Firefox the Autocomplete and search work. On the popup page there is a button on it that if clicked, will close the popup window and refresh the parent page the search iFrame is on. However, when the X in the upper right corner of the popup is clicked, it closes the page, but it doesn't refresh the parent page. Is there a way to get the X close button to respond like the close button on the popup page?
2. When you type into the search box, the Autocomplete presents a list of items to choose from, but when you select the item, it only searches for what was originally typed into the search box and not what was clicked on. Is there a way to get it to search for what was actually clicked on?
3. The Autocomplete doesn't seem to allow items in the list to be clicked on in IE. You have to arrow down to select it and then click on the search button. Is there a way for it to work?
Below is the code for the search page with the javascript search code and Autocomplete javascript on it. Any help is appreciated!
Enkrypted
A+
1. On Chrome and Firefox the Autocomplete and search work. On the popup page there is a button on it that if clicked, will close the popup window and refresh the parent page the search iFrame is on. However, when the X in the upper right corner of the popup is clicked, it closes the page, but it doesn't refresh the parent page. Is there a way to get the X close button to respond like the close button on the popup page?
2. When you type into the search box, the Autocomplete presents a list of items to choose from, but when you select the item, it only searches for what was originally typed into the search box and not what was clicked on. Is there a way to get it to search for what was actually clicked on?
3. The Autocomplete doesn't seem to allow items in the list to be clicked on in IE. You have to arrow down to select it and then click on the search button. Is there a way for it to work?
Below is the code for the search page with the javascript search code and Autocomplete javascript on it. Any help is appreciated!
Code:
<HTML>
<HEAD>
<!--
<meta name="WT.qs_dlk" content="UjCgagrIZ2cAAGqsGkQAAAAT"/>
<meta name="inject_params" content="WT.qs_dlk=UjCgagrIZ2cAAGqsGkQAAAAT&"/>
-->
<TITLE>Search Engine</TITLE>
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="[URL unfurl="true"]http://code.jquery.com/jquery-1.9.1.js"></script>[/URL]
<script src="[URL unfurl="true"]http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>[/URL]
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<script>
$(function() {
var availableTags = [
"Generic Search Term",
];
$( "#tags" ).autocomplete({
source: availableTags,
select: function(event, ui) {
// console.log($(this));
console.log(ui.item.value); //Basic or Fortran, etc.
$('#btnSearch').click(); // Uncomment and the form submits to new_page.htm shown below
}
});
});
</script>
<script>
title = new Object();
desc = new Object();
links= new Object();
matched= new Object();
keywords= new Object();
found= new Object();
var temp=0;
// actual location or the item to be searched
// description of he location
// actual link
// percentage match found
// keywords as parsed from the input
// # of titles present in the database
title[0]=1
//no of keywords after parsing
keywords[0]=0
//no of matches found.
found[0]=0
<!-- Begin List of Searchable Items -->
title[1]="Generic Search Term"
desc[1]="Generic Search Term"
links[1]="Generic Search Term.html"
matched[1]=0
<!-- End list of Searchable items -->
function search(){
// get the input from the input by the user and strip it into keywords
//+
var skeyword=document.searchengine.keywords.value.toLowerCase();
var check=1;
var pos=0;
var i=0;
var j=0;
var itemp=0;
var config='';
while (true)
{
if (skeyword.indexOf("+") == -1 )
{
keywords[check]=skeyword;
break;
}
pos=skeyword.indexOf("+");
if (skeyword !="+")
{
keywords[check]=skeyword.substring(0,pos);
check++;
}
else
{
check--;
break;
}
skeyword=skeyword.substring(pos+1, skeyword.length);
if (skeyword.length ==0)
{
check--;
break;
}
}
// the keywords have been put in keywords object.
keywords[0]=check;
//alert(check);
// matching and storing the matches in matched
for ( i=1; i<=keywords[0];i++)
{
for (j=1;j<=title[0];j++)
{
if (title[j].toLowerCase().indexOf(keywords[i]) > -1 )
{
matched[j]++;
}
}
}
// putting all the indexes of the matched records in found
for (i=1;i<=title[0];i++)
{
if (matched[i] > 0 )
{
found[0]++;
// increment the found
found[found[0]]=i;
}
}
//alert("found 0 " + found[0]);
// sort the list as per max percentage of matches
for (i=1;i<=found[0]-1;i++)
{
for(j=i+1;j<=found[0];j++)
{
if ( matched[found[i]]< matched[found[j]] )
{
temp= found[j];
found[j]=found[i];
found[i]=temp;
}
}
}
// end of sort
// prepare for document write.
config='toolbar=no,location=no,directories=no,status=no,menubar=no,width=900,height=900'
config += 'scrollbars=yes,resizable=yes'
output = window.open ("","outputwindow",config)
output.document.write('<title> My Search Window </title>');
output.document.write('<BODY bgcolor=#ffffff text=#000000 link=#990099 vlink =#339966 >');
output.document.write('<center> <h1>My Search Window</h1></center>');
output.document.write('<hr>');
output.document.write(' The Keyword(s) you searched :: '.big() )
for (i=1; i<=keywords[0]; i++)
{
output.document.write( keywords[i].bold() +" ");
}
output.document.write('<br>');
if (found[0]==0)
{
//alert(found[0]);
output.document.write('<hr>');
output.document.write("<b>No matches resulted in this search </b> <br>");
output.document.write("You may close the results and reduce the length/number of the keywords <br>");
}
else
{
// data has been found
output.document.write(" <hr> <b> The Results of the search are : </b> ");
output.document.write( found[0] +" Entries found ".italics());
output.document.write("<table border=1 width=100%>");
for (i=1; i<=found[0];i++)
{
output.document.write("<tr><td valign=top bgcolor=#9999ff>");
output.document.write("<h3>" +i +"</h3>");
output.document.write("<td valign=top>");
itemp=found[i];
output.document.write(desc[itemp].bold() +"<br>" + '<a href="' + links[itemp] + '" target="_blank">' + links[itemp] + '</a>' +"<br>");
}
found[0]=0;
output.document.write("</table>");
}
output.document.write ("<hr>");
output.document.write ("<form><center>")
output.document.write ("<input type='submit' value='Back to Search Page' onClick = 'refreshParent()'>")
output.document.write ("</center></form>")
}
</script>
<script type="text/javascript">
window.onload = function(){
window.opener.location.reload();
window.close();
}();
</script>
<body bgcolor="#E7E7E7">
<form name="searchengine" id="searchFeature">
<input type="text" id="tags" name="keywords" value="Enter keyword(s)" onfocus="this.value=''" maxlength=40 onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').search()">
<input type="button" name="go" id="btnSearch" Value="Search Help Docs" onClick="search()">
<script language="JavaScript" type="text/javascript">
var gDomain="[URL unfurl="true"]www.qsstats.com";[/URL]
var gDcsId="dcs37pv2c00000oun93vypyva_4k6d";
var gFpc="WT_FPC";
var gConvert=true;
var gFpcDom = "htmlgoodies.com";
if ((typeof(gConvert) != "undefined") && gConvert && (document.cookie.indexOf(gFpc + "=") == -1) && (document.cookie.indexOf("WTLOPTOUT=")==-1)) {
document.write("<SCR"+"IPT TYPE='text/javascript' SRC='http"+(window.location.protocol.indexOf('https:')==0?'s':'')+"://"+gDomain+"/"+gDcsId+"/wtid.js"+"'><\/SCR"+"IPT>");
}
function dcsAdditionalParameters() {}
</script>
<script type="text/javascript" src="/imageserver/common/webtrends.js"></script>
<noscript><img alt="" border="0" name="DCSIMG" width="1" height="1" src="[URL unfurl="true"]http://www.qsstats.com/dcs37pv2c00000oun93vypyva_4k6d/njs.gif?dcsuri=/nojavascript&WT.js=No&WT.tv=8.0.2;WT.qs_dlk=UjCgagrIZ2cAAGqsGkQAAAAT;"[/URL] /></noscript>
</BODY>
</TD>
<!--# removed from below links[itemp].link(links[itemp])+"<br>"); -->
<!--# temp= (matched[itemp]/keywords[0])*100
output.document.write("<i> Matched with keywords :: " +temp+" % </i>" );
matched[itemp]=0 -->
Enkrypted
A+