Как сделать чтобы автоматом добавлялся пробел перед первым вводимым символом в поле input?

Question

[Александр]

Хочу немного улучшить поиск на сайте, сейчас он ищет букву и слог в середине слова.
А если при вводе будет добавляться пробел перед первым символом, то будут выдаваться только строки где есть слова начинающиеся на введённые букву или слог.
Вариант с вставкой пробела сразу в value не подходит - он может быть убран при повторном вводе, да и подсказку прячет.
Как можно сделать, чтобы автоматом добавлялся пробел перед первым вводимым символом в поле input?
Может быть поиск слов по первой букве можно сделать по другому, но надо чтобы именно по первой букве слова, а не строки.

Comments

[Алексей Уколов]

Какой-то костыль костыля... Если у вас всегда безусловно должен добавляться пробел, чтобы искалось по началу слова, так и реализуйте на бэкенде поиск только по началу, зачем какие-то пробелы?

[Талян]

У товарисча тэг JS, думаю у него все чудеса происходят на стороне клиента. Сервер такое не стерпел бы и взорвался)

Answer 1

[Павел Корнилов]

Совершенно не понимаю на зачем это нужно, но, раз просите:
https://jsfiddle.net/sp16jxg5/

Comments

[Александр]

Большое спасибо.
Если бы ещё можно было сделать так чтобы при стирании текста пробел тоже стирался, а появлялся бы только при повторном вводе, было бы вообще отлично.
Но если так нельзя, то и так пойдёт, просто при удалении текста пробел возвращается и весь список вылезает, это в примере 5 городов, настоящий список намного больше.

[Павел Корнилов]

Александр, можно, но зачем? Я сделал условие, что пробел в начале будет всегда только 1. Так что, даже если его не стирать, а вводить другие данные - так и останется - 1 пробел в начале строки, как и просили.
Итак, будем его стирать?

[Александр]

Павел Корнилов, можно и не стирать, может проще чтобы скрипт срабатывал на втором символе, если конечно пробел считается символом.
Я писал, что и так пойдёт, просто при стирании текста вылезает весь список возможных запросов.

[Павел Корнилов]

https://jsfiddle.net/f0mhyc63/

[Александр]

Павел Корнилов, спасибо.

Answer 2

[Алексей Уколов]

Без костылей с пробелами:

$("#who").on("keyup", function() {
  var searchText = $(this).val().toLowerCase() || "___";
  
  $("#poisk > div").each(function() {
    var elem = $(this);
    
    if (elem.text().toLowerCase().indexOf(searchText) !== 0) {
      elem.addClass("hidden");
    } else {
      elem.removeClass("hidden");
    }
  });
});

Comments

[Александр]

Проверил ваш код, не работает, но после замены !== 0 на !== 1 заработал как надо.
Спасибо.

[Алексей Уколов]

А, ну я в своём примере исходил из того, что в разметке левые пробелы в начале тоже исчезнут.
По-хорошему, должно быть так:

elem.text().trim().toLowerCase().indexOf(searchText) !== 0

[Александр]

Алексей Уколов, спасибо.

[Александр]

Алексей Уколов, извините за назойливость, а ваш код можно подправить так, чтобы он искал по первой букве не в строке, а в слове, чтобы можно было найти например ленинград забивая в поле поиска слово ленинград? пример.
Или весь код надо переделывать?

[Алексей Уколов]

Можно, разумеется:

$("#who").on("keyup", function() {
  var searchText = $(this).val().toLowerCase() || "___";

  $("#poisk > div").each(function() {
    var elem = $(this);
    var words = elem.text().toLowerCase().split(' ');

    if (words.find(function(word) { return word.indexOf(searchText) === 0; })) {
      elem.removeClass("hidden");
    } else {
      elem.addClass("hidden");
    }
  });
});

[Александр]

Алексей Уколов, БОЛЬШОЕ СПАСИБО.

Answer 3

[Талян]

Поменяйте JS код-обработчик формы, а не занимайтесь ерундой.

Там где у вас в коде element.value изымается - замените его на

' ' + element.value

Comments

[Александр]

А как это сделать здесь?