CODEWITHSUNDEEP
javascriptmysqlnode.js
user8991794
user8991794

Reputation: 45

Search functionality with Node JS & MySql?

I am attempting to add a search functionality with my database using Node & Handlebars to render. However when I search now it's giving me a 404 error, why is it not display search results? Here is my routing info

        function searchPokemon(res, mysql, context, searchinput, complete){
        var inserts = [req.body.searchinput];
        var sql = 'SELECT pokemonname FROM pokemon WHERE pokemonname LIKE "%' + inserts + '%';
        mysql.pool.query(sql, inserts, function(error, results, fields){
                if(error){
                        res.write(JSON.stringify(error));
                        res.end();
                }
                context.search = results;
                complete();
                });
        }


   router.get('/search', function(req, res){
        callbackCount = 0;
        var context = {};
        var mysql = req.app.get('mysql');
        searchPokemon(res, mysql, context, req.body.searchinput, complete);
        function complete(){
                callbackCount++;
                if(callbackCount >= 1) {
                        res.render('search-pokemon', context);
                }
        }
});

Here is my current page that I am rendering the search functionality on (pokemon.handlebars)

<h1>Current Pokemon Moves -</h1>

<table id="table">
    <thead>
        <th>Pokemon Name </th>
        <th>Evolution Level   </th>
        <th>Move Name   </th>
        <th>Strength</th>
    </thead>
   <input type="text" class="search form-control" name="searchinput" placeholder="Pokemon Name">
   <input type="button" class="btn btn-primary" value="Search" onclick="getUsers({{searchinput}})">
        <br>

And here is my script to search 

function getUsers(searchinput){
        $.ajax({
                url: '/search-pokemon',
                type: 'GET',
                success: function(result){
                        window.location.reload(true);
                }
        })
};

Upvotes: 2

Views: 8327

Answers (1)

maneesha
maneesha

Reputation: 135

I had the same issue with the search function and I used typeahead.js. Instead of 'post' I have used 'get'

    router.post('/search', function(..)..

I'll put my code here, so u can get an idea.

app.js

// return homepage
app.get('/',function(req,res){
    res.render('index');
});

// search function    
app.post('/search',function(req,res){
    var str = {
        stringPart:req.body.typeahead
    }

    db.query('SELECT songTitle FROM song WHERE songTitle LIKE "%'+str.stringPart+'%"',function(err, rows, fields) {
        if (err) throw err;
        var data=[];
        for(i=0;i<rows.length;i++)
        {
            data.push(rows[i].songTitle);
        }
        res.send(JSON.stringify(data));
    });
});

index.ejs

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../JS/jquery.typeahead.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $('input.typeahead').typeahead({
    name: 'typeahead',
    remote: 'http://localhost:3000/search?key=%QUERY',
    limit: 10
    });
    });
</script>

<form method="POST" action="/search"> 
<label>Search Data</label>
<input class="typeahead tt-query" spellcheck="false" autocomplete="off" name="typeahead" type="text" />
</form>

Upvotes: 1

Related Questions