У меня есть сценарий автозаполнения текстового поля jQuery, который использует скрипт PHP для запроса базы данных MySQL. В настоящее время результат отображается в текстовом поле, но я хочу, чтобы он выглядел так, как если бы он был вычеркнут в текстовом поле. Как я могу сделать что-то подобное? Пример этого в окне поиска Google Instant.
Мой текущий код веб-страницы:
<script type='text/javascript'> function lookup(a) { if(a.length==0) { $("#suggestions").hide(); } else { $.post("suggest.php", { query: ""+a+"" }, function(b) { $("#suggestions").html(b).show(); }); } } </script> <input type='text' id='query' onkeyup='lookup(this.value);'> <div id='suggestions'></div> И мой PHP-код:
<?php $database = new mysqli('localhost', 'username', 'password', 'database'); if(isset($_POST['query'])) { $query = $database->real_escape_string($_POST['query']); if(strlen($query) > 0) { $suggestions = $database->query("SELECT name, value FROM search WHERE name LIKE '%" . $query . "%' ORDER BY value DESC LIMIT 1"); if($suggestions) { while($result = $suggestions->fetch_object()) { echo '' . $result->name. ''; } } } } ?>
Похоже, Google использует 2 входа, один с серым текстом, а другой – с черным текстом. Затем они накладываются так, что серый текст вводится внизу, а черный текст – сверху (больший z-индекс выглядит так).
В них серый ввод содержит полный текст плюс предложение, а черный ввод отображает только то, что вы набрали. Надеюсь, это поможет вам разобраться в коде. Вот Google html:
<div style="position:relative;zoom:1"> <div style="position:relative;background:transparent"> <input type="text" maxlength="2048" id="grey" disabled="disabled" autocomplete="off" class="lst"> <div id="misspell" class="lst"></div> </div> <div> <div class="lst" style="position: absolute; top: -900px; left: -9000px; max-width: 3000px; overflow: hidden; width: auto;"></div> <input type="text" maxlength="2048" name="q" class="lst" autocomplete="off" size="41" title="Search" value=""> <span id="tsf-oq" style="display:none"></span> </div> </div>
EDIT: Вот очень упрощенная версия некоторых html и css, которые вы могли бы использовать http://jsfiddle.net/JRxnR/
#grey { color: #CCC; background-color: transparent; top: 0px; left: 0px; position:absolute; } #black { color: #000; background-color: transparent; z-index: 999; top: 0px; left: 0px; position:absolute; } <input id="grey" type="text" value="test auto complete" /> <input id="black" type="text" value="test" />
я все еще не уверен, где именно вы хотите получить эффект, если его текстовое поле, а затем событие keyup изменит свойство предыдущего цвета текста на тусклый цвет, т.е.
$ ( '# Запрос') CSS ( 'цвет', 'серый').
это изменит цвет текста на серый. Или вы можете попробовать изменить его непрозрачность.
стиль id
#серый
используемый Google.
#grey { background: none repeat scroll 0 0 #FFFFFF; border-color: transparent; color: silver; overflow: hidden; position: absolute; z-index: 1; }
поэтому на первом этапе вы показываете текст с использованием z-index, а на следующем шаге вы показываете текст, который пользователь вводил, и это даст вам тот же эффект от google.