Как создать автозаполнение форума, используя локальное хранилище html5? - PullRequest
0 голосов
/ 18 марта 2011

Привет всем, я новичок в программировании.Вы поможете мне написать код для автозаполнения текстовых полей в HTML-форме.Я хочу использовать локальное хранилище данных.Если в любое время пользователь введет некоторые данные в текстовое поле, они будут сохранены в локальном хранилище.если в следующий раз, когда он введет данные, данные локального хранилища, относящиеся к этому полю, будут отображаться как всплывающее окно (например, автозаполнение mozila или chrome).

, пожалуйста, предоставьте мне некоторые рекомендации

Ответы [ 3 ]

7 голосов
/ 29 января 2012

Вы можете использовать тег <datalist> html5, чтобы использовать его в качестве автозаполнения.Вот пример:

<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>
2 голосов
/ 20 июня 2011

Вы можете использовать это так:

<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>

для получения дополнительной информации перейдите на http://madhukar.info/Pages/Articles.aspx?ArtId=49

1 голос
/ 18 марта 2011

Что ж, чтобы получить желаемые результаты, я, вероятно, сначала построю объект JavaScript из данных, введенных пользователем в форму. Это облегчит ввод данных в локальное хранилище. Скажите, что ваша форма выглядит так ->

<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>

Существует отличное руководство по работе с локальным хранилищем HTML5 здесь , и оно должно помочь вам понять систему пар ключ-значение, которую она ожидает использовать для хранения данных. Предполагая, что вы используете jQuery, вы можете подготовить и отправить ваши данные следующим образом

$('#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);
});

Что касается автозаполнения части вашей проблемы, есть несколько разных способов сделать это. Как кто-то упомянул, вы можете использовать автозаполнение jQuery, но я не слишком знаком с его API, поэтому я бы, вероятно, выбрал простой jane JavaScript. Код также будет зависеть от того, проверяете ли вы несколько значений. Однако в простейшем случае, запоминая данные одного пользователя, все, что вам действительно нужно сделать, это проверить наличие значения в локальном хранилище. Нечто подобное возможно ->

$('#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);
  }
});

Все это было записано непосредственно в это текстовое поле в StackOverflow, поэтому оно не предназначено для запуска в том виде, в каком оно написано, и я нигде не могу это проверить. Однако я надеюсь, что это поможет вам двигаться в правильном направлении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...