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 you have read our privacy policy.

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