Скрыть результаты, пример W3Schools PHP AJAX Live Search - PullRequest
Новая
       4

Скрыть результаты, пример W3Schools PHP AJAX Live Search

1 голос
/ 14 марта 2012

Я играю с функцией Ajax Live Search с веб-сайта W3Schools. Он работает нормально, за исключением того, что я хотел бы, чтобы результаты div, #livesearch, снова скрывались, когда пользователь щелкает по нему. Я нашел пример кода, который делает это, но я не могу объединить оба успешно. Если я добавлю код, результаты поиска могут быть скрыты, когда пользователь щелкает, но пользователь должен сначала щелкнуть, чтобы увидеть их, что, очевидно, не сработает.

http://www.w3schools.com/php/php_ajax_livesearch.asp http://bytes.com/topic/javascript/answers/676788-hide-div-tag-if-outside-div-clicked

Кто-нибудь может указать мне правильное направление?

Спасибо

Chris

Ответы [ 2 ]

0 голосов
/ 14 марта 2012

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

Я смог добиться этого, используя событие onblur, чтобы скрыть коробку (я полагаю, что ваш пример, который вы нашли, работает одинаково хорошо). onblur="hide(this)" чтобы скрыть выпадающий div. Функция Hide js такая же: function hide(id) { document.getElementById("livesearch").style.display = "none"; }

Чтобы он появлялся при наведении мыши, я добавил событие onmousemove к входу: <input type="text" size="30" onkeyup="showResult(this.value)" onblur="hide(this)" onmousemove="showResult(this.value)" /> .

Самое главное Я добавил эту строку document.getElementById("livesearch").style.display = "block"; в xmlhttp.onreadystatechange=function(), чтобы div снова появился.

0 голосов
/ 14 марта 2012

Оформить событие javascript 'onblur'.

Вы можете создать новую функцию, которая очищает div: 

blurFunction() {
document.getElementById("livesearch").innerHTML = ''
}

Событие onblur: 

<input type="text" size="30" onkeyup="showResult(this.value)" onblur="blurFunction()" />

РЕДАКТИРОВАТЬ: На самом деле я только что заметил, что функция showResult уже обслуживает очистку div, поэтому просто вставьте: 

<input type="text" size="30" onkeyup="showResult(this.value)" onblur="showResult('')" />
...