Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Autocomplete and Search issues

Status
Not open for further replies.
Enkrypted

Enkrypted

Technical User
Sep 18, 2002
663
US
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!

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&amp;WT.js=No&amp;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+
 
Sort by date Sort by votes
Anybody have any idea on how I can get this working?

Enkrypted
A+
 
Upvote 0 Downvote
is the intended use case the following:

1. click on the 'Search Help Docs' button and a new window opens searching on the text that was entered in the box
2. click on one of the links displayed below the search box and a new window opens showing the clicked value as that which you are searching for

If so, then the issue is as shown here:

Code: 
            $(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.
[red]------>>>>>[/red]  $('#btnSearch').click(); // Uncomment and the form submits to new_page.htm shown below
                    }
                });
            });

this entry emulates a click on the btnSearch button when you click a link. so the search will be repeated on whatever is then in the box (rather than what is clicked on). If you remove the .click() event, the box will be populated by the value of whatever item is selected. you would then have to click manually.

If you want to avoid the manual click you can take the value of ui.item.label or ui.item.value (whichever is the most apt), insert it into the search box and then call click().
Code: 
$("#tags").autocomplete({
  source: availableTags,
  select: function(event, ui){
    $('#tags').val(ui.item.label);           
    $('#btnSearch').click();
  }
});

If you want to go directly to a url embedded in the availableTags you would need first to split out the variable into an array of objects like so:

Code: 
availableTags = [ {label: 'my label', value:'[URL unfurl="true"]http://mysite.com'},[/URL] {label: 'second label', value:'[URL unfurl="true"]http://second.com'}[/URL]];
$("#tags").autocomplete({
  source: availableTags,
  select: function(event, ui){
    $('#tags').val(ui.item.label);           
    window.open( ui.item.value ); //open a new window
  }
});
 
Upvote 0 Downvote
ps, i don't have IE to test the clickability thing but the issue is perhaps linked to the tab-index of the items. and perhaps to the trailing comma in the list of availableTags (IE sometimes used to get mad about that) or perhaps the tab-index of the li elements? or perhaps to do with doctype issues (make sure the page validates and use an html5 doctype)

and for the first issue, i don't have a cross at the top right of the page - maybe a windows thing? anyway you can capture the window beforeunload event and intercept it.

Code: 
$(document).ready(){
  var btn = $('input[value="Back to Search Page"]'); //button that closes the form
  $(btn).on('click', function(){
    $(window).off("beforeunload"); //need this to stop recursion
  };

  $(window).on('beforeunload', function(e){
   e.preventDefault();
   $(btn).trigger('click');
  }
}
 
Upvote 0 Downvote
Jpadie,

Thanks for replying with some things to try. I tried the suggestions you gave but they didn't seem to help much. It seemed that when I tried them, the Autocomplete portion wasn't displaying anything.

Enkrypted
A+
 
Upvote 0 Downvote
which in particular? the code in the first post is tested - the rest I cannot test as (i) I don't have IE and (ii) you haven't given the code that generates the window and provides the full set of availableTags etc
 
Upvote 0 Downvote
jpadie,

Sorry for the late response. As far as your questions go...

which in particular? the code in the first post is tested - the rest I cannot test as (i) I don't have IE and (ii) you haven't given the code that generates the window and provides the full set of availableTags etc

Below is the code that defines the search tags (availableTags). The term "Generic Search Term" is just that. If you replace that and duplicate the line, it emulates the Autocomplete terms to search for

Code: 
<script>
  $(function() {
    var availableTags = [
      [COLOR=#EF2929]"Generic Search Term",[/color]
];
    $( "#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>

The code below simulates how Autocomplete searches for the terms (by title). If you change Title, Desc and Links to match what you want (Title has to remain the same as above), it will show the item in the Autocomplete.

Code: 
<script>
.
.
.
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 Description"
links[1]="Generic Search Term.html"
matched[1]=0

Below is the code that makes the output window

Code: 
// 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>Search Results </title>');
output.document.write('<BODY bgcolor=#ffffff  text=#000000  link=#990099 vlink =#339966 >');
 
output.document.write('<center> <h1><img src="resources/images/logo.png">Search Results</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 Main' onClick = 'refreshParent()'>") 
output.document.write ("</center></form>") 
}
</script>

Below is the code that will close the pop-up search window and refresh the iFrame in the parent window
Code: 
<script type="text/javascript">
window.onload = function(){
    window.opener.location.reload();
    window.close();
}();
</script>

Below is the code I have for the input box and search button
Code: 
<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()"/>

Hopefully this will give a little more insight as to how the code works. I'm not too overly concerned about it not working in IE, but would like to see if I can get the first 2 questions resolved:

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?

Thanks a lot for taking time to assist me with this. It's really appreciated!!!

Enkrypted
A+
 
Upvote 0 Downvote
both issues already have code fixes posted for them.

you reported they 'did not work'. i asked you to explain what it was that did not work and what aspect did not work and (by extension) to provide any error messages or associated information that would be reported in firebug or whatever javascript console you use.

to recap:

Code: 
$("#tags").autocomplete({
  source: availableTags,
  select: function(event, ui){
    $('#tags').val(ui.item.label);           
    $('#btnSearch').click();
  }
});

Code: 
/* to be included in the pop up window */
$(document).ready(){
  var btn = $('input[value="Back to Search Page"]'); //button that closes the form
  $(btn).on('click', function(){
    $(window).off("beforeunload"); //need this to stop recursion
  };

  $(window).on('beforeunload', function(e){
   e.preventDefault();
   $(btn).trigger('click');
  }
}
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
262
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
289
AbidingDude
AbidingDude
edd92
  • Locked
  • Question
Dropzone Issues
Replies
0
Views
107
edd92
edd92
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
102
ggriffit
ggriffit
leifoet
  • Locked
  • Question
How to combine JS and ASP ?
Replies
5
Views
178
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top