how to create autocomplete forum using html5 local storage?_问答_开发者

how to create autocomplete forum using html5 local storage?

开发者 https://www.devze.com 2023-02-17 11:30 出处：网络

Hi to 开发者_运维知识库all, I am new to programming. will you help me to write code for autocomplete text fields in a html form. I want to use local storage data.

Hi to 开发者_运维知识库all, I am new to programming. will you help me to write code for autocomplete text fields in a html form. I want to use local storage data. If any time user will inter some data in text field, it will be stored in local storage. if next time when he enters data then, localstorage data related to that field will appear as popup(like mozila or chrome autocomplete).

please provide me some guidelines

You can use <datalist> tag of html5 to use it as autocomplete. Here is an example:

<form action="action.php" method="get">

  <input list="bdcity_list" name="bdcity" />
  <datalist id="bdcity_list">
     <option value="Dhaka">
     <option value="Khulna">
     <option value="Sylhet">
     <option value="Rajshahi">
     <option value="Bandarbon">
  </datalist>
 <input type="submit" />

</form>

You can use it like this:

<input list="Employees" type="text" />
<datalist id="Employees">
<option value="Adarsh"></option>
<option value="Madhukar"></option>
<option value="Amar"></option>
<option value="Avinash"></option>
<option value="Kundan"></option>
<option value="Amit"></option>
<option value="Viresh"></option>
<option value="Vivek"></option>
</datalist>

for further info go to http://madhukar.info/Pages/Articles.aspx?ArtId=49

Well, in order to get the results you desire, I would probably first build a JavaScript object out of the data that the user has entered into the form. This will make it easier to enter the data into the local storage. Say your form looks like this ->

<html>
  <form action='someaction.php'>
    name: <input id='name' type='text' />
    age : <input id='age' type='text' />
    <input type='submit' id='submit' value='submit' />
  </form>

  <ul id='autocomplete'>

  </ul>

</html>

There is a great guide to working with HTML5 local storage here, and should help you to understand the key-value pair system that it expects you to use for storing data. Assuming you were using jQuery, you could prepare and send your data like this

$('#submit').click(function(){
  // first get the proper values
  var name = $('#name').val();
  var age = $('#age').val();

  // next create the object
  var obj = {name:name,age:age}

  // next send the object off to localstorage
  // using the localStorage object, we can
  // very simply pass in data
  localStorage.setItem('user',obj);
});

As far as the autocomplete portion of your problem goes, there are a few different ways you could go about accomplishing this. As someone mentioned, you could go for jQuery autocomplete, but I'm not too familiar with its API, so I would probably go for some plain jane JavaScript. The code would also depend on whether you were checking against multiple values. However in the simplest case, remembering a single user's data, All you'd really need to do is check for the existence of the value in local storage. Something like this possibly ->

$('#name').change(function(){
  // check the local storage to see if
  // there are similar values to what's
  // being entered
  var currentText = $('#name').val();

  if( localStorage.user.indexOf(currentText) == 0){
    $('#name').val(localStorage.user);
  }
});

This was all written directly into this textbox at StackOverflow, so it's not intended to run as written and I'm not in any place to test this. I do, however, hope this can move you in the right direction.