1

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

<html>

<head>
  <script type="text/javascript" language="javascript">
    var autocomplete = ['абакан', 'армавир', 'баку', 'биробиджан', 'вильнюс'];
    window.onload = function() {
      document.getElementById('input').onkeyup = keyUp;
    }

    function keyUp(e) {
      var e = e || window.event;
      switch (e.keyCode) {
        case 40:
          var selected = -1;
          var spans = document.getElementById('autocomplete').getElementsByTagName('span');
          for (i = 0; i <= spans.length; i++)
            if (i in spans && spans[i].className == 'selected') {
              spans[i].className = '';
              selected = i;
            }
          selected++;
          for (i = 0; i <= spans.length; i++)
            if (i in spans && i == selected) {
              spans[i].className = 'selected';
            }
          break;
        case 38:
          var spans = document.getElementById('autocomplete').getElementsByTagName('span');
          var selected = spans.length;
          for (i = 0; i <= spans.length; i++)
            if (i in spans && spans[i].className == 'selected') {
              spans[i].className = '';
              selected = i;
            }
          selected--;
          for (i = 0; i <= spans.length; i++)
            if (i in spans && i == selected) {
              spans[i].className = 'selected';
            }
          break;
        case 13:
          var spans = document.getElementById('autocomplete').getElementsByTagName('span');
          for (i = 0; i <= spans.length; i++)
            if (i in spans && spans[i].className == 'selected') {
              document.getElementById('input').value = spans[i].innerHTML;
              document.getElementById('autocomplete').innerHTML = '';
            }
          break;
        default:
          var div = document.getElementById('autocomplete');
          var value = document.getElementById('input').value;
          div.innerHTML = '';
          if (value.length > 0) {
            autocomplete.forEach(function(elem, index) {
              var regex = new RegExp("^" + value, "i");
              //if(elem.includes(value)) {
              if (elem.match(regex)) {
                div.innerHTML += '<span>' + autocomplete[index] + '</span><br />';
              }
            });
          }
      }
    }
  </script>
  <style>
    input {
      position: absolute;
      top: 10px;
      left: 150px;
    }
    
    #autocomplete {
      position: absolute;
      top: 40px;
      left: 150px;
    }
    
    span.selected {
      background-color: red;
    }
  </style>
</head>

<body>
  <input type="text" id="input" />
  <div id="autocomplete"></div>
</body>

</html>

1 ответ 1

4

Добавляем к каждой подсказке вызов функции choice_city при клике В самой функции вставляем название города в input и убираем остальные подсказки

    <html>

    <head>
      <script type="text/javascript" language="javascript">
        var autocomplete = ['абакан', 'армавир', 'баку', 'биробиджан', 'вильнюс'];
        window.onload = function() {
          document.getElementById('input').onkeyup = keyUp;
        }

        function keyUp(e) {
          var e = e || window.event;
          switch (e.keyCode) {
            case 40:
              var selected = -1;
              var spans = document.getElementById('autocomplete').getElementsByTagName('span');
              for (i = 0; i <= spans.length; i++)
                if (i in spans && spans[i].className == 'selected') {
                  spans[i].className = '';
                  selected = i;
                }
              selected++;
              for (i = 0; i <= spans.length; i++)
                if (i in spans && i == selected) {
                  spans[i].className = 'selected';
                }
              break;
            case 38:
              var spans = document.getElementById('autocomplete').getElementsByTagName('span');
              var selected = spans.length;
              for (i = 0; i <= spans.length; i++)
                if (i in spans && spans[i].className == 'selected') {
                  spans[i].className = '';
                  selected = i;
                }
              selected--;
              for (i = 0; i <= spans.length; i++)
                if (i in spans && i == selected) {
                  spans[i].className = 'selected';
                }
              break;
            case 13:
              var spans = document.getElementById('autocomplete').getElementsByTagName('span');
              for (i = 0; i <= spans.length; i++)
                if (i in spans && spans[i].className == 'selected') {
                  document.getElementById('input').value = spans[i].innerHTML;
                  document.getElementById('autocomplete').innerHTML = '';
                }
              break;
            default:
              var div = document.getElementById('autocomplete');
              var value = document.getElementById('input').value;
              div.innerHTML = '';
              if (value.length > 0) {
                autocomplete.forEach(function(elem, index) {
                  var regex = new RegExp("^" + value, "i");
                  //if(elem.includes(value)) {
                  if (elem.match(regex)) {
                    var click_func = "choice_city('" + autocomplete[index] + "')"; 
                    div.innerHTML += '<span onclick="' + click_func + '">' + autocomplete[index] + '</span><br />';
                  }
                });
              }
          }
        }
        var choice_city = function(city_name){
           document.getElementById('input').value = city_name;
           document.getElementById('autocomplete').innerHTML = '';
        };
      </script>
      <style>
        input {
          position: absolute;
          top: 10px;
          left: 150px;
        }
        
        #autocomplete {
          position: absolute;
          top: 40px;
          left: 150px;
        }
        
        span.selected {
          background-color: red;
        }
      </style>
    </head>

    <body>
      <input type="text" id="input" />
      <div id="autocomplete"></div>
    </body>

    </html>

Ваш ответ

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

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