asp live search

Posted on 2011-05-05
Last Modified: 2012-05-11
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:
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" 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";
        }"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

Question by:avir
    LVL 6

    Expert Comment

    Try with jQuery autosuggest plugin:
    You can modify it to do exactely what you want

    Author Comment

    Looks like it might be a possibility. I'm just wondering if I can adjust it to  extract results from an existing database table.

    Author Comment

    I can't seem to figure out how to make this work with asp. I guess I'm not experienced enough.

    Accepted Solution

    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.

    Author Closing Comment

    I found my own solution.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    This demonstration started out as a follow up to some recently posted questions on the subject of logging in: and…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now