본문 바로가기
개발/PHP

[php]검색어 자동완성::Jquery

by 똘또히 2018. 4. 3.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/font-awesome.min.css" rel="stylesheet">
 
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
 
        <style>
            #display {
                width:100%;
                display:none;
                position:absolute;
                z-index:9999;          
                float:right;
                border-left:solid 1px #dedede;
                border-right:solid 1px #dedede;
                border-bottom:solid 1px #dedede;
                overflow:hidden;
            }
    
            .display_box {
                padding:4px;
                font-size:12px;
                height:80px;
                background:#FFFFFF;
                color: #333333;
            }
            
            .display_box:hover {
                background:#fcffaa;
                color: black;
                cursor: pointer;
            }
            
            .boximage {
                float:left;
                margin-right:10px;
            }
        </style>  
    
        <script>
            $(document).ready(function () {
                $("#keyword").keyup(function()   {
                    var keyword = $(this).val();
                    var dataString = 'searchword='+ keyword;                
                                
                                
                    if(keyword=='') {
                        $("#display").hide();
                    } else {    
                        $.ajax({
                        type: "POST",
                        url: "suggestions.php",
                        data: dataString,
                        cache: false,
                        success: function(html) {              
                            $("#display").html(html).show();
                            }
                        });
                    } return false;                            
                });    
            });
    
 
            function goDetail(no) {
                document.location.href="detail.php?no="+no;
            }  
            
            function checkSearch() {
                var searchKeyword=document.getElementById("keyword").value;
                
                if(!searchKeyword.trim())
                    alert('검색어를 입력해주세요');
                else {
                    location.href='searchresult.php?q='+searchKeyword;
                }
            }
    
        </script>
    </head><!--/head-->
 
    <body>    
        <form action="javascript:checkSearch();">
            <div class="input-group">
                <input name="keyword" id="keyword" type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-danger" type="button" onclick="javascript:checkSearch('keyword');"><i class="icon-search"></i></button>
                </span>
            </div>
            <div id="display">
            </div>
        </form>
 
    </body>
</html>




2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
    if($_POST) {    
        $q=$_POST['searchword'];    
        $result=mysql_query("SELECT * FROM table_name WHERE title LIKE '$q%' LIMIT 5");
    
        while($row=mysql_fetch_array($result)) {
            $title=stripslashes($row[title]);
            $author=stripslashes($row[author]);
            $no=$row[no];
            $cover_img=$row[cover_img];
            
            echo "
                <div class='display_box' onclick='javascript:goDetail($no);'>
                    <img src='images/$cover_img' width='50' class='boximage'/><b>$title</b><br/>$author
                </div>                
            ";
        }
    }
?>




출처 : http://www.dev-diary.com/archives/4141



저작자표시

'개발 > PHP' 카테고리의 다른 글

[PHP] 현재페이지 URL 정보 가져오는 방법  (0) 2018.05.08
if문 축약식 [선택자 active 혹은 checked]를 선택할때 쉬운방법:: php  (0) 2018.05.04
[php] 한영 / 영한 변환  (0) 2018.04.03
[php][초성분리] 자음모음 / 초성,중성,종성 분리하기  (0) 2018.04.03
본문안 이미지 추출 : 본문내 특정문자 추출  (0) 2018.03.14

관련글

티스토리툴바