www.webdeveloper.com
Results 1 to 5 of 5

Thread: Live Keyword Search

Hybrid View

  1. #1
    Join Date
    Apr 2013
    Posts
    23

    Live Keyword Search

    Good morning programmers,

    I'm looking to create a live keyword search using PHP, MySQL, and Javascript.

    I have a pagination script which works fine.

    How would one create a form that allows users to fill in a form and results are produced after pushing send without refreshing the page?

    Is this possible to do with PHP alone, or would I need to use something like Javascript and / or jQuery?

    Thanks

  2. #2
    Join Date
    Dec 2012
    Posts
    95
    You'll need to use some Ajax to search for keywords asynchronously (without reloading the page). You need to create a separate PHP script to process the Ajax request sent from JavaScript. Here's a quick example.

    HTML Code:
    <form id="keywordForm">
        <input id="keyword" type="text"/>
        <input type="submit" value="Search"/>
    </form>
    
    <script>
        var form = document.getElementById('keywordForm');
        form.addEventListener('submit',function(e) {
            var search = form.keyword.value;
            var xhr = new XMLHttpRequest();
            xhr.open("GET","keywordsearch.php?search="+search,true);
            xhr.send();
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    var response = xhr.response;
                }
            }
            e.preventDefault();
        });
    </script>
    Then in keywordsearch.php you'd have something like this to except the search parameter sent by a GET request through Ajax then search the database for matching rows.

    PHP Code:
    if(isset($_GET['search'])) {
        
    $pdo = new PDO("mysql:host=localhost;dbname=keywordDB',$user,$pass);
        
    $query = $pdo->prepare("SELECT keyword FROM keywords WHERE keyword LIKE ?");
        
    $query->execute(array($_GET['search']."%"))
        
    $keywords = array();
        while(
    $keyword = $query->fetch()) {
            
    $keywords[] = $keyword['keyword'];
        }
        echo json_encode(
    $keywords);


  3. #3
    Join Date
    Apr 2013
    Posts
    23

    Re:

    How do you execute the AJAX function?

    Also do I need to use XML? as currently I do not

  4. #4
    Join Date
    Dec 2012
    Posts
    95
    This part of the example I gave is the AJAX request

    HTML Code:
            var xhr = new XMLHttpRequest();
            xhr.open("GET","keywordsearch.php?search="+search,true);
            xhr.send();
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    var response = xhr.response;
                }
            }
    That opens a request to a page called keywordsearch.php, sending through a keyword to search for as a GET request, and then waits for a response from that page which is then assigned to the "response" variable.

    The short PHP script I just made to process the request searches a database table for the keyword and then returns the results as a JSON array which can then be read by JavaScript.

  5. #5
    Join Date
    Apr 2013
    Posts
    23
    I appreciate the help but I don't know how to use the JSON command. How do you turn the JSON array into something in PHP / HTML?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles