4

Есть список городов.

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

  • Балаково
  • Абакан
  • Архангельск
  • Набережные челны

Попробовал вот так, но ищет currentdata по всей строке

str.toLowerCase().indexOf(currentdata.toLowerCase());

вот моя функция:

$('#test').keyup(function() {
  currenVal = $(this).val().toLowerCase();
  $('ul.content>li').each(function(i, el) {
    if ($(el).text().toLowerCase().indexOf(currenVal) > -1) {
      $(el).removeClass('hidden');
    } else {
      $(el).addClass('hidden');
    }
  })
})
li.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input id="test">
<ul class="content">
  <li>Абакан</li>
  <li>Ангарск</li>
  <li>Армавир</li>
  <li>Архангельск</li>
  <li>Астрахань</li>
  <li>Балаково</li>
  <li>Балашиха</li>
</ul>

4
  • Добавьте еще тогда html-разметку, чтобы можно было полностью воспроизвести ваш код и внести в него необходимые правки 19 июл 2018 в 10:33
  • 2
    А если у ваш код работает, то вам надо заменить >-1 на ==0, так как вы ищете любое вхождение, а не первое 19 июл 2018 в 10:39
  • @SergeyGlazirin спасибо то что надо, читал, не увидел что так можно, пример кода вверху передал, если поменять на ==0 то работает как надо
    – engenes
    19 июл 2018 в 10:42
  • Для красоты можно использовать функцию toogleClass: $(el).toggleClass('hidden', $(el).text().toLowerCase().indexOf(currenVal) !== 0); . Пропадет необходимость в ветвлении.
    – ReinRaus
    19 июл 2018 в 10:52

2 ответа 2

6

$('#test').keyup(function() {
  currenVal = $(this).val().toLowerCase();
  $('ul.content>li').each(function(i, el) {
    if ($(el).text().toLowerCase().indexOf(currenVal) == 0) {
      $(el).removeClass('hidden');
    } else {
      $(el).addClass('hidden');
    }
  })
})
li.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input id="test">
<ul class="content">
  <li>Абакан</li>
  <li>Ангарск</li>
  <li>Армавир</li>
  <li>Архангельск</li>
  <li>Астрахань</li>
  <li>Балаково</li>
  <li>Балашиха</li>
  <li>Набережные чалны</li>
</ul>

indexOf возвращает индекс первого вхождения, если вам надо, чтобы поиск осуществлялся в начале строки, то над делать проверку на то равен ли indexOf нулю

let array = [
  'Балаково',
  'Абакан',
  'Архангельск',
  'Набережные челны'
]

let filter = 'аб';

//Поиск вхождения только в начале
console.log(array.filter(x => x.toLowerCase().indexOf(filter.toLowerCase()) == 0));

//Поиск по любому вхождению
console.log(array.filter(x => x.toLowerCase().indexOf(filter.toLowerCase()) >= 0));

3
  • список городов это маркированный сиписок а не массив. конечно я могу собрать массив, из маркированного списка, потом воспользоваться вашей функцией, но потом мне снова нужно будет парсить итоговый массив и скрывать элементы маркированного списка которого нет в этом массиве. Но я использую функцию each, внутри которой и скрываю элементы не соответствующие вводимым данным, хотелось бы как то изменить именно сам метод поиска
    – engenes
    19 июл 2018 в 10:28
  • дополнил вопрос
    – engenes
    19 июл 2018 в 10:29
  • 2
    @ЕвгенийШевцов а какая разница массив у вас или "список"? Речь ведь в ответе о том, что вы неправильно используете метод indexOf из String.
    – Regent
    19 июл 2018 в 10:41
2

Зачем такие сложности? Используйте функцию str.startsWith().

Нужно всего-то заменить

($(el).text().toLowerCase().indexOf(currenVal) > -1)

на

($(el).text().toLowerCase().startsWith(currenVal))
2
  • Сокращение кода на несколько символов и получение при этом проблем в старых (причем не таких уж и старых - тот же IE11, например) браузерах - действительно ли это проще?
    – Regent
    19 июл 2018 в 11:17
  • @Regent Про сокращение кода я ничего не говорил, а ограниченная поддержка - недостаток, согласен. 19 июл 2018 в 12:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.