JQuery работает, но я ищу простой ванильный JavaScript

0

Этот сайт был невероятно полезен, до такой степени, что это первый раз, когда мне нужно было задать вопрос. Я застрял... У меня есть форма поиска в html, в которой есть событие onKeyUp, которое запускает div с результатами.

<form id="searchform">
    <div>
        What are you looking for? <input tabindex="0" type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);"  />
        </div>
    <div id="suggestions"></div>
</form>

Тело имеет событие onLoad(), которое создает размытие в поле ввода, которое закрывает результаты поиска, когда вход теряет фокус.

function searchbox() {

var elem;
    elem = document.getElementById('inputString');

elem.blur(function(){

    document.getElementById('suggestions').style.display = 'none';

 });
}

Проблема, с которой я сталкиваюсь, заключается в том, что это не закрывает размытие div... Но если я использую jQuery и заменяю elem var на $ ("input"), он работает отлично. Я пробовал много разных вещей, и я получаю один из двух результатов. Либо div не исчезнет при размытии, что делает ссылки внутри div активными и интерактивными. Или, событие размытия работает, и div исчезает, но он идет до того, как ссылка может быть нажата и активирована.

Итак, мой вопрос: какой бы ванильный javascript для jQuery? Я понимаю, что он назначает событие размытия всем входам.

$("input")

Я знаю, что могу использовать его, и он действительно работает, но я пытаюсь учиться без него и пытаюсь понять, что делает jQuery больше, чем просто подключать все, что я нахожу в сети. Надеюсь, я оставил достаточно информации для небольшого руководства.

  • 0
    Вот JS Fiddle, jsfiddle.net/jar862/93th2/2 Я не знаю почему, но там это не сработает, но работает на реальной странице.
  • 0
    Вам нужно установить тип загрузки для javascript 'No Wrap - in <body>', чтобы это работало в JSFiddle. :) - Вы уже нашли решение своего вопроса?
Теги:

2 ответа

1

Попробуй это:

elem.onblur = function(){
    document.getElementById('suggestions').style.display = 'none';
};

jQuery .blur - это ярлык для .on( "blur", handler ) а blur - это событие, поэтому вы можете присоединить его, назначив функцию свойству onblur.

Поделиться
  • 0
    Должно быть, это был один из методов, которые я попробовал. Это позволяет onblur закрывать div, но срабатывает до того, как ссылка будет нажата. Спасибо хоть.
  • 0
    Затем добавьте время ожидания: elem.onblur = function () { setTimeout(function () { ... }, 100); };
0

Попробуйте это, у него есть поддержка IE, но addEventListener также поддерживается IE9+

function searchbox() {
   var elem = document.getElementById('inputString');
   if(window.addEventListener) {
     elem.addEventListener('blur', function(event) {
       document.getElementById('suggestions').style.display = 'none';
     }, false);
   } elseif(window.atatchEvent) {
     window.attachEvent("onblur", function(event) {
       document.getElementById('suggestions').style.display = 'none';
    });
   } else {
      alert("Your browser does not support events");
   }
}
Поделиться
  • 0
    Имеет тот же эффект, что и в предыдущем предложении, позволяет закрывать div, но не позволяет нажимать на ссылки в этом div. Это похоже на иерархию, где триггер размытия срабатывает до того, как ссылка успеет сработать.
  • 0
    Можете ли вы опубликовать JS скрипку о том, что ваша проблема влечет за собой? Хорошо, вы создаете эти элементы динамически?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню