Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    11
    Thanked 0 Times in 0 Posts

    instant search, i have the code, just one question

    hello all

    i'm almost newbie to Javascript.

    i found this for instant search :

    demo : http://www.johnboy.com/scripts/insta...-php/index.php

    index.php
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    <
    html xmlns="http://www.w3.org/1999/xhtml"
    <
    head
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <
    title>Instant Search With Arrow Key Navigation Using jQuery and PHP</title

    <
    script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="search.js"></script> 

    <script> 

        //arrow key navigation 
        $(document).keydown(function(e){ 

            //jump from search field to search results on keydown 
            if (e.keyCode == 40) {  
                $("#s").blur(); 
                  return false; 
            } 

            //hide search results on ESC 
            if (e.keyCode == 27) {  
                $("#results").hide(); 
                $("#s").blur(); 
                  return false; 
            } 

            //focus on search field on back arrow or backspace press 
            if (e.keyCode == 37 || e.keyCode == 8) {  
                $("#s").focus(); 
            } 

        }); 
        // 


     $(document).ready(function() { 

        //clear search field & change search text color 
        $("#s").focus(function() { 
            $("#s").css('color','#333333'); 
            var sv = $("#s").val(); //get current value of search field 
            if (sv == 'Search') { 
                $("#s").val(''); 
            } 
        }); 
        // 

        //post form on keydown or onclick, get results 
        $("#s").bind('keyup click', function() { 
            $.post("results.php", //post 
                $("#search").serialize(),  
                    function(data){ 
                        //hide results if no more than 2 characters 
                        if (data == 'hide') { 
                            $('#results').hide(); 
                        } 

                        //show results if more than 2 characters 
                        if (data != 'hide') { 
                            $("#results").html(data); 
                            if (data) { 
                                $("#results").show(); 
                            } 
                        } 
                }); 
        }); 
        // 

        //hide results when clicked outside of search field 
        $("body").click(function() { 
            $("#results").hide(); 
        }); 
        // 

    }); 


    </script> 

    <link href="style.css" rel="stylesheet" type="text/css" /> 

    </head> 

    <body> 

    <h1>Instant Search Using jQuery & PHP</h1> 

    <h2>Example keywords (website, jquery, php, launch)<br /> 
      <br /> 
    </h2> 

    <form id="search" name="search" method="post" action="" autocomplete="off"> 
      <input name="s" type="text" id="s" value="Search" /> 
      <div id="results"></div> 
    </form> 


    <br /> 
    <br /> 
    <br /> 

    <a href="http://www.johnboy.com/blog/tutorial-instant-search-with-arrow-key-navigation-using-jquery-and-php">Back to Article &amp; Source Code</a> 


    </body> 
    </html> 

    results.php
    PHP Code:
    <?php  

    require_once('mysql_connect.php');  

    //only show results if two or more characters have been typed - max of 50 characters 
    $len strlen(str_replace(" ","",$_POST[s])); //don't count blank spaces 
    if ($len || $len 50) { 
        echo 
    'hide'; die; 

    // 

    //get results if search string is longer than 3 characters 
    if ($len 3) { 

        
    record_set('results'
            

                SELECT news_title, news_heading,  
                MATCH (news_title,news_text) AGAINST ('"
    .strip_tags($_POST[s])."*' IN BOOLEAN MODE) AS ranking  
                FROM jbp_blog_articles  
                WHERE MATCH (news_title,news_text) AGAINST ('"
    .strip_tags($_POST[s])."*' IN BOOLEAN MODE)  
                AND news_type = 1 
                ORDER BY ranking DESC  
                LIMIT 0,8 
            "
    ); 



    ?> 

    <ul> 
    <!--display user's initial search term--> 
        <li><a class="link" href="#" title="<?php echo $_POST[s]; ?>"><?php echo "$_POST[s]"?></a></li> 
    <!---->     

        <?php if ($totalRows_results) do { ?> 
        <li><a class="link" href="/blog/<?php echo $row_results[news_heading]; ?>" target="_blank" title="<?php echo $row_results[news_title]; ?>"><?php echo "$row_results[news_title]"?></a></li> 
        <?php } while ($row_results mysql_fetch_assoc($results)); ?> 
    </ul>
    search.js
    PHP Code:
    /*
    * Author:      Marco Kuiper (http://www.marcofolio.net/)
    * Customizations by JBP noted in comments below
    */

    var currentSelection 0;
    var 
    currentUrl '';


        
    // Register keydown events on the whole document
        
    $(document).keydown(function(e) {
            switch(
    e.keyCode) { 
                
    // User pressed "up" arrow
                
    case 38:
                    
    navigate('up');
                break;
                
    // User pressed "down" arrow
                
    case 40:
                    
    navigate('down');
                break;
                
    // User pressed "enter"
                
    case 13:
                    if(
    currentUrl != '') {
                        
    window.location currentUrl;
                    }
                break;
            }
        });
        
        
    // Add data to let the hover know which index they have
        
    for(var 0< $("#results ul li a").size(); i++) {
            $(
    "#results ul li a").eq(i).data("number"i);
        }
        
        
    // Simulate the "hover" effect with the mouse
        
    $("#results ul li a").hover(
            function () {
                
    currentSelection = $(this).data("number");
                
    setSelected(currentSelection);
            }, function() {
                $(
    "#results ul li a").removeClass("search_hover");
                
    currentUrl '';
            }
        );


    function 
    navigate(direction) {

        
    // Check if any of the menu items is selected
        
    if($("#results ul li .search_hover").size() == 0) {
            
    currentSelection = -1;
        }
        
        
    //JBP - focus back on search field if up arrow pressed on top search result
        
    if(direction == 'up' && currentSelection == 0) {
            $(
    "#s").focus();
        }
        
    //

        
    if(direction == 'up' && currentSelection != -1) {
            if(
    currentSelection != 0) {
                
    currentSelection--;
            }
        } else if (
    direction == 'down') {
            if(
    currentSelection != $("#results ul li").size() -1) {
                
    currentSelection++;
            }
        }
        
    setSelected(currentSelection);
    }

    function 
    setSelected(menuitem) {

        
    //JBP - get search result to place in search field on hover
        
    var title = $("#results ul li a").eq(menuitem).attr('title');
        $(
    "#s").val(title);
        
    //

        
    $("#results ul li a").removeClass("search_hover");
        $(
    "#results ul li a").eq(menuitem).addClass("search_hover");
        
    currentUrl = $("#results ul li a").eq(menuitem).attr("href");

    style.css
    PHP Code:
    #search {
        
    position:relative;
        
    display:block;
        
    height:35px;
        
    width:500px;
        
    padding0px;
        
    margin0px auto 0px auto;
    }

    #results {
        
    border:1px solid #CCCCCC;
        
    width:500px;
        
    display:none;
        
    z-index300;
        
    line-height:0;
        
    margin-top:-3px;
        
    margin-left0px;
    }
    #results ul {
        
    list-style:none;
        
    padding:0px;
        
    margin:0px;
    }
    #results ul li {
        
    background-color:#FFFFFF;
        
    text-alignleft;
    }
    #results ul li:hover {
        
    background-color:#EBEBEB;
    }
    #results ul li a {
        
    line-height:20px;
        
    text-decoration:none;
        
    padding5px;
        
    displayblock;
        
    color#333333;
    }
    .
    search_hover 
        
    background-color:#EBEBEB!important; 
        
    color:#232323!important; 
    }
    body {
        
    padding50px;
        
    text-aligncenter;
        
    background-color#FFFFFF;
        
    font-familyGenevaArialHelveticasans-serif;
        
    font-size13px;
    }
    body a {
        
    text-decorationnone;
    }
    #s {
        
    outline:none;
        
    width480px;
        
    padding10px;
        
    border1px solid #CCCCCC;
        
    color#CCCCCC;
        
    z-index200;
        
    positionrelative;
        
    heightauto;
    }
    .
    go {
        
    padding9px;
        
    font-weightbold;
        
    width60px;
        
    margin-left: -4px;
        
    border0px solid #CCCCCC;
        
    heightauto;
        
    font-size16px;
        
    background-color#F7F7F7;
    }
    h1 {
        
    font-familyGeorgia"Times New Roman"Timesserif;
        
    padding0px;
        
    margin-bottom10px;
        
    font-size30px;
        
    color#333333;
    }
    h2 {
        
    font-familyGeorgia"Times New Roman"Timesserif;
        
    padding0px;
        
    font-size12px;
        
    color#999999;
        
    margin0px;
        
    font-styleitalic;
        
    font-weightnormal;


    now i just want to edit one thing, when you search for something, results are shown under the search field, when you click on each result, goes to a link.
    i want when clicking on a result, not going to link, just show that result string on the search field.

    could you please tell how to do it?

    where should i edit in script?

    thanks in advanced

  • #2
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Edit: sorta figured out what you meant. Okay.. See this line?
    PHP Code:
    <li><a class="link" href="/blog/<?php echo $row_results[news_heading]; ?>" target="_blank" title="<?php echo $row_results[news_title]; ?>"><?php echo "$row_results[news_title]"?></a></li>
    try changing it to

    PHP Code:
    <li><a class="link" href="javascript:  document.search.s.value='<?php echo $row_results[news_heading]; /*var here*/ ?>; return false" title="<?php echo $row_results[news_title]; ?>"><?php echo "$row_results[news_title]"?></a></li>
    I'm not sure which string you want. Just change the string [marked with the /*var here*/ comment] to whichever one you want.
    Last edited by mvmacd; 12-13-2011 at 06:45 PM.
    For programming information, visit irnsystems.com
    Also check out Points2Survey and earn items.

  • Users who have thanked mvmacd for this post:

    ataomega (12-13-2011)

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    11
    Thanked 0 Times in 0 Posts
    first of all thanks for your help

    i just want to show result's title on search field.


    thanks

  • #4
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Ah, so that would be $row_results[news_title] then? And so I assume my code worked for you?
    For programming information, visit irnsystems.com
    Also check out Points2Survey and earn items.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •