Поиск города как на сайте ситилинка

@pacanchik2013 · Регистрация: 08.04.2015

Студворк — интернет-сервис помощи студентам

Доброго всем =))

Ребята, кто может подсказать как реализовать поиск города как на сайте ситилинка?
В шапке при выборе города, всплывает попап, и если в поле input ввести первую букву города, то остаются города начинающиеся на эту букву а все остальные прячутся. Как это можно реализовать на JS или jQuery ?
Буду благодарен любой помощи/подсказкам

Добавлено через 7 минут
P.S.: точнее города остаются не начинающиеся на эту букву, а города в которых есть такая буква

Qwerty_Wasd · 14.03.2018, 16:52

pacanchik2013, к примеру - песочница

HTML5
1
2
<input id="filter" type="search"/>
<div id="modal">Санкт-Петербург<br/>Новосибирск<br/>Владивосток<br/>Бердск<br/>Сосновый бор<br/>Сочи<br/>Челябинск<br/>Энгельс</div>

JavaScript
1
2
3
4
5
6
7
8
var city=modal.innerText.split('\n');
filter.oninput=function(){
  var result=[];
  for(var i=0;i<city.length;i++){
    if(~city[i].toLowerCase().indexOf(filter.value.toLowerCase())) result[i]=city[i]
  }
  modal.innerHTML=result.filter(function(x){return x!==undefined&&x!==null}).join('<br>')
}

P.S. Пример грубоват, но думаю смысл ясен. Не забудьте доработать до ума напильником

@pacanchik2013 · 14.03.2018, 18:05 **[ТС]**

Qwerty_Wasd, благодарю за пример, а вот по поводу доработок, это мне ещё далеко, так как я в JS не силён а нужен он в принципе только для реализации такой же штуковины как у ситилинка, а далее уже идет сплошной PHP и иже с ним

По Вашему примеру, сдедал так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<input id="filter" type="search"/>
<div id="modal">
    <ul id="city_to">
        <li>Санкт-Петербург</li>
        <li>Новосибирск</li>
        <li>Владивосток</li>
        <li>Бердск</li>
        <li>Сосновый бор</li>
        <li>Сочи</li>
        <li>Челябинск</li>
        <li>Энгельс</li>
    </ul>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var city = city_to.innerText.split("\n");
filter.oninput = function() {
  var result = [];
  for (var i = 0; i < city.length; i++) {
    if (~city[i].toLowerCase().indexOf(filter.value.toLowerCase()))
      result[i] = city[i];
  }
  city_to.innerHTML = result
    .filter(function(x) {
      return x !== undefined && x !== null;
    })
    .join("<li>");
};

И после ввода любого символа, у первого города пропадает тэг li (даже если явно набрать например Бердск, то он отображается без тэга), чего я тут нахимичил лишнего?

Qwerty_Wasd · 14.03.2018, 18:58

pacanchik2013, я не писал вам универсального решения, лишь привел один из примеров как это сделать. Изменив структуру построения DOM, вы сделали код JS, который обращался к той структуре, нерабочим или работающим неправильно. Хотите сделать как у ситилинка - придется начать читать. Хотите чтобы сделали за вас - вам в другой раздел. Ну или подождите немножко - кто-нибудь заморочнется. Изменения JS относительно этого дерева

Сообщение от pacanchik2013

<div id="modal">
* * <ul id="city_to">
* * * * <li>Санкт-Петербург</li>
* * * * <li>Новосибирск</li>
* * * * <li>Владивосток</li>
* * * * <li>Бердск</li>
* * * * <li>Сосновый бор</li>
* * * * <li>Сочи</li>
* * * * <li>Челябинск</li>
* * * * <li>Энгельс</li>
* * </ul>
</div>

Песочница

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<input id="filter" type="search"/>
<div id="modal">
  <ul>
    <li>Санкт-Петербург</li>
    <li>Новосибирск</li>
    <li>Владивосток</li>
    <li>Бердск</li>
    <li>Сосновый бор</li>
    <li>Сочи</li>
    <li>Челябинск</li>
    <li>Энгельс </li>
  </ul>
</div>

CSS
1
2
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0}
#modal>ul>li{list-style:none}

JavaScript
1
2
3
4
5
6
7
var city=document.querySelector('#modal ul').innerText.split('\n');
filter.oninput=function(){
  var result=[];
  for(var i=0;i<city.length;i++){
    if(~city[i].toLowerCase().indexOf(filter.value.toLowerCase())) result[i]=city[i]
  }  
  modal.innerHTML=result.map(v=>`<li style='list-style:none'>${v}</li>`).filter(function(x){return x!==undefined&&x!==null}).join('')}

@pacanchik2013 · 19.03.2018, 16:47 **[ТС]**

Я согласен с Вами что нужно почитать и я непременно в скором времени займусь изучением JS. Еще мне подсказали что на jQuery это будет проще реализовать, но с ним я тоже на "Вы"...

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

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
<div id="searchcontainer">
<div class="qaz">
   <span class="alphabetic">
      <a href="#" data-city="112" class="myclass <? // какие-то еще действия ?>"><?=$cityname?></a><!-- Астана -->
   </span>
   <span class="alphabetic">
      <a href="#" data-city="113" class="myclass <? // какие-то еще действия ?>"><?=$cityname?></a><!-- Астрахань-->
   </span>
   <!-- и так далее -->
</div>
</div>

JavaScript
1
2
3
4
5
6
7
    var city=document.querySelector('#searchcontainer').innerHTML.split('</div>');
    filter.oninput=function(){
    var result=[];
    for(var i=0;i<city.length;i++){
    if(~city[i].toLowerCase().indexOf(filter.value.toLowerCase())) result[i]=city[i]
    }  
    searchcontainer.innerHTML=result.map(v=>`<div>${v}</div>`).filter(function(x){return x!==undefined&&x!==null}).join('')}

Новые блоги и статьи Все статьи Все блоги /
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .

@pacanchik2013 27 / 26 / 9 Регистрация: 08.04.2015 Сообщений: 288

	Поиск города как на сайте ситилинка 14.03.2018, 13:27. Показов 4816. Ответов 4 Метки нет (Все метки) Доброго всем =)) Ребята, кто может подсказать как реализовать поиск города как на сайте ситилинка? В шапке при выборе города, всплывает попап, и если в поле input ввести первую букву города, то остаются города начинающиеся на эту букву а все остальные прячутся. Как это можно реализовать на JS или jQuery ? Буду благодарен любой помощи/подсказкам Добавлено через 7 минут P.S.: точнее города остаются не начинающиеся на эту букву, а города в которых есть такая буква 0