2

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);
                }
        })
};

1 Answer 1

1

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>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.