[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 424
  • Last Modified:

asp live search

I'm looking for some help tidying up a live search that I managed to piece together from codes that I found. The search returns its results from an sql table. My main problem is that I have my search results opening in a layered div and I would like to close the div with a click outside the div. When I use display: none to close the div, it will not allow any results links to be clicked on before closing.
I got around this by adding a timeout to other parts of the page, that reloads the page after a half a second, but it's not a very good solution. Among other problems it creates,  if someone misses hitting the link, the page will reload and they won't know what happened. I'm hoping someone might be able to give me a more successful solution.

You can see the site working at: http://www.imj.org.il/artcenter/defaultx.asp
I've attached the javascript, html(form) and asp codes I'm using.

sql="select * from Artists WHERE ArtistE like '" & Request("q") & "%' order by ArtistEC"
rs.open sql,conn,1,3
if rs.recordcount=0 then
end if
response.Write "<div style='position:absolute; width: 208px; word-wrap: break-word; left: 50%; top: 235px; margin-left: -262px; z-index: 0; border: 1px solid #A5ACB2; padding: 5px;background: #dedede;'>"
if not rs.EOF then
Do while not rs.EOF
Response.Write "<div style='padding: 3px 0'><a href='defaultx.asp?artist=" & rs("ArtistCode") & "'>" & rs("ArtistE") & "</a></div>"
response.Write "No artists found"
end if
response.Write "</div>" 
Set rs = Nothing 
Set conn = Nothing

Open in new window

<input type="text" size="30" id="find" onkeyup="showResult(this.value)" onmousedown="this.value='';" value="Find an artist"  style="width: 212px; height: 17px"    />
<div id="livesearch" onmousedown="rfTime()"></div>

Open in new window

<script type="text/javascript">
    function showResult(str) {
        if (str.length == 0) {
            document.getElementById("livesearch").innerHTML = "";
            document.getElementById("livesearch").style.border = "0px";
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("livesearch").innerHTML = xmlhttp.responseText;
                //document.getElementById("livesearch").style.border = "1px solid #ccc";
        xmlhttp.open("GET", "livesearchx.asp?q=" + str, true);

    function rfTime() {
        // the page refreshes after .4 second after the user clicks on the dropdown giving them time to click on a link
        var t = setTimeout("refreshPage()", 400);
    function refreshPage() {

Open in new window

  • 4
1 Solution
Try with jQuery autosuggest plugin: http://code.drewwilson.com/entry/autosuggest-jquery-plugin
You can modify it to do exactely what you want
avirAuthor Commented:
Looks like it might be a possibility. I'm just wondering if I can adjust it to  extract results from an existing database table.
avirAuthor Commented:
I can't seem to figure out how to make this work with asp. I guess I'm not experienced enough.
avirAuthor Commented:
I figured this out myself by using  jquery hide() for clicking outside the div and extending the links inside the div to the width of the div.
avirAuthor Commented:
I found my own solution.

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now