How to make search field for user with autofill for html list

Question

I need a search field on my site allowing users to search for their location (for a local weather forecast).

I have a html list of locations - each location is clickable (with href to the relevant weather forecast page).

The user should start typing a location in the search field - and as the location name is typed, a match function should start and autofill the search field.

The user should not see the list - only the search field.

Once the match function has autofilled the search field, user should press go or return - and the link to the relevant weather forecast be activated.

I know some html and javascript, but this one is above my level.

I found this code on stackoverflow Filter search for <ul>. It's something like that - but user must not see the list.

Answer 1

You would have shared a bit info with us:

You know some HTML, but don't wanna show it? We would have helped you better if you just sent us some code! :)

What you'll need

Ok, here is the thing.

First create an input field such as:

<input type="text" name="text" id="text" value="" onkeyup="search()"/>

Then use a function as:

function search () {
  var value_field = $('#text').val();
  $.ajax({
    // create an ajax request here..and get the value
    success: function (data) {
      $('#div').html(data);
    }
  });
}

<div id="div"></div>

This will be the div where all the data from ajax would come and display.

Where all the thing is happening

Now the main thing is from the other page. You need to control it to show the data or hide it or whatever you want it to do. That's going to happen on the other page the page where request is going.

You can try to show the data only when there is a perfect match else write this:

$('#div').html('Keep writing, you can match');

And make the user write some more words, who know what he mind match!

User will never see the list

Untill or unless you let him go to the page, untill then he will just see the results you are viewing him! So you should use a Database to show the data when the request is Ajax only, otherwise don't create a connection to the database. This way user would never ever see the list, unless its you! :D

Summary:

And the thing is same, the main process is:

1. You create a function in the input field to search when there is any word added. Forget the backspace right now.

2. You will send the value to the next page for processing, get the data, set it to the type you want the user to see.

3. Display it using `$('selecter').html(data);

Good luck.