Best practices to implement search function

Question

I've found some questions/answers but they were all pretty dated, so I wanted to ask and see if there's some new practices/meta.

I've got this web-page I'm working now, atm its only front page and its build on html, css and javascript. I'm building in Laravel because soon I'll be implementing a database for the forms, users, documents a few other things.

Anyway, I wanted a simple search engine(one that only searches through the different pages, for example, kind of like facebook's search)

So after thinking and digging for a while, this is the solution I'm currently working on:

HTML:

<ul class="navbar-nav ml-1 mr-5">
    <form class="form-inline" id="procurahead">
      <input class="form-control espaco_procura" type="text" list="listhead" placeholder="Pesquisa" aria-label="Search" id="txtinputhead" autocomplete="off">
      <datalist id="listhead">
        <!-- THEMES -->
        <option value="foo">
        <option value="foo1">
        <option value="foo2">
        <option value="foo3">
        <option value="etc">
      </datalist>
      <button class="btn btn-outline-success btnprocura" type="submit"><i class="material-icons procura">search</i></button>
    </form>
  </ul>

JAVASCRIPT:

$('#procurahead').submit(function(event){

event.preventDefault();

var input1 = $('#txtinputhead').val();

if(input1 == "foo"){
window.location.href = 'http://localhost/laravel/l55/public/foo';
}
if(input1 == "foo1"){
window.location.href = 'http://localhost/laravel/l55/public/foo1';
}
if(input1 == "foo2"){
window.location.href = 'http://localhost/laravel/l55/public/foo2';
}
if(input1 == "foo3"){
window.location.href = 'http://localhost/laravel/l55/public/foo3';
} 
if(input1 == "etc"){
window.location.href = 'http://localhost/laravel/l55/public/etc';
} 
});

So, This is working pretty well while I don't have a lot of pages, but I figure that if I expand to all of web pages then I'll be pretty long and seemingly there should be some simpler way to do it.

So the question is: Is there any better/simpler way to implement this?

Thanks in advance!

Append your URL (`http://localhost/laravel/l55/public/`) with `$('#txtinputhead').val()`? — Thum Choon Tat, Jul 10 '18 at 10:47
Letting a user chose from a list of given keywords is not really a “search”, that is more _navigation_ I would say. And if the user doesn’t select one of the given options, but inputs their own term - then you still don’t have any functionality to actually search for that here. — CBroe, Jul 10 '18 at 11:21
That is true, and that is something I've been looking for to learn how to do. — JohnyJohnson, Jul 10 '18 at 11:23

score 1 · Answer 1 · answered Jul 10 '18 at 11:01

Taking this snipped from using javascript to detect whether the url exists before display in iframe as an introduction to the code, you could build something like this:

function urlExists(url) {
    var request;
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    request.open('GET', url, false);
    request.send();
    if (request.status === 404) {
        return false;
    } else {
        return true;
    }
}
$('#procurahead').submit(function (event) {
    event.preventDefault();
    var input1 = $('#txtinputhead').val();
    var url = 'http://localhost/laravel/l55/public/' + input1;
    if (urlExists(url)) {
        window.location.href = url;
    }
}

I hope this is what you need. Greetings.

Best practices to implement search function

1 Answers1