JS выпадающие позиции (предложения) для ввода на мобильном телефоне не отображаются - PullRequest
Новая
       11

JS выпадающие позиции (предложения) для ввода на мобильном телефоне не отображаются

0 голосов
/ 19 января 2020

Я довольно новичок в Rails и только заканчиваю работу над сайтом. В моем html у меня есть поле поиска, где пользователь вводит имя области. Предложения автозаполнения появляются с каждым ключом. Все отлично работает, только не на мобильном. Любые намеки на то, что может быть причиной? Если я отлаживаю с Safari + iPhone, в консоли появляются клавиши ввода, только раскрывающийся список не отображается. Пытался вывести его на передний план с индексом z, но это не дало эффекта.

HTML Код: 

          <form id="area-form" autocomplete="off" action="/" method="GET">
            <div class="select-dropdown">
              <input id="areaname" name="areaname" class="search-input"  type="text" placeholder="Search for your area here..." style="height: 40px">
              <div class="suggestions">
              </div>
            </div>
          </form>
        </div>

JS 

const areas = [
    { name: 'Melkbos' },
    { name: 'Observatory' },
    { name: 'Milnerton' },
    { name: 'Kraaifontein'},
    { name: 'Athlone'},
    { name: 'Hout Bay'},
    { name: 'Strand'},
    { name: 'Cape Town (inner city)'},
    { name: 'Durbanville'},
    { name: 'Mitchells Plain'},
    { name: 'Newlands'},
    { name: 'Gardens'},
    { name: 'Camps Bay'},
    { name: 'Belville'},
    { name: 'Goodwood'},
    { name: 'Philippi'}
]

console.log('Js');

const searchInput = document.querySelector('.search-input');
const suggestionsPanel = document.querySelector('.suggestions');
const areaForm = document.querySelector('#area-form');

searchInput.addEventListener('input', function(e) {
  console.log('input key');
  const input = searchInput.value;
  suggestionsPanel.innerHTML = '';
  const suggestions = areas.filter(function(area) {
    return area.name.toLowerCase().startsWith(input)
  });

  suggestions.forEach(function(suggested) {
    const div = document.createElement('div');
    div.innerHTML = suggested.name;
    suggestionsPanel.appendChild(div);
  })
  if (input === '') {
    suggestionsPanel.innerHTML = '';
  }
})

areaForm.addEventListener("submit", (e) => {
  e.preventDefault();
})

suggestionsPanel.addEventListener('click', (e) => {
  searchInput.value = e.target.innerText;
  suggestionsPanel.innerHTML = '';
  document.getElementById("area-form").submit();
})

CSS

$color-blue-grey: #d8e9f0;

#search-field-small {
  position: absolute;
  width: 35%;
  input {
    height: 25px;
  }
}

#search-field-small input {
  font-size: 16px;
}

#search-field-small .suggestions div {
  padding: 8px 32px;
}

.search-input {
  height: 20px;
}

.select-dropdown {
  background-color: $color-blue-grey;
  border-radius: 3px;
  overflow: hidden;
}

.select-dropdown input {
  width: -webkit-fill-available;
  border: 0;
  font-size: 20px;
  color: #333;
  padding: 0.4em 1em;
}

.select-dropdown input:focus {
  outline: none;
}

.suggestions {
  border-top: 2px solid #999;
}

.suggestions div {
  padding: 12px 32px;
  font-size: 16px;
  color: #333;
  border-top: 1px solid #666;
  cursor: pointer;
  z-index: 3;
}

.suggestions div:hover {
  background-color: #CDDAE2;
  color: black;
}

Спасибо и всего наилучшего

...