jQuery自動完成在輸入文本框的背景

我有一個jQuery文本框自動完成腳本，它使用PHP腳本來查詢MySQL數據庫。目前，結果顯示在文本框下，但我希望它顯示爲在文本框中淡出。我該如何做這樣的事情？ Google Instant搜索框就是一個例子。jQuery自動完成在輸入文本框的背景

我當前網頁的代碼是：

<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. ''; 
      } 
     } 
    } 
} 
?>

來源

2011-06-13 Cosmo Posmo

我剛剛修改的代碼，使之更好的閱讀。我建議將代碼更加分開，以便在將來進行調試並不困難。 – Bojangles 2011-06-13 21:25:37

看起來谷歌使用2個輸入，一個輸入灰色文本，另一個輸入黑色文本。然後將它們疊加，以便灰色文本輸入位於底部，黑色文本輸入位於頂部（看起來像z-index更大）。

灰色輸入包含全文加上建議，黑色輸入只顯示您輸入的內容。希望這可以幫助你弄清代碼。下面是谷歌的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>

編輯：這裏的一些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" />

來源

2011-06-13 21:02:52 fehays

我現在還不能確定究竟在何處你想要的效果，如果它的文本框，然後在KEYUP事件將以前的文本顏色屬性更改爲暗色即

$（'＃query'）.css（'color'，'gray'）;

這會將文本的顏色更改爲灰色。或者你可以嘗試改變它的不透明度。 ID的

風格

#gray

由谷歌使用。

#grey { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-color: transparent; 
    color: silver; 
    overflow: hidden; 
    position: absolute; 
    z-index: 1; 
}

所以在第一步驟中使用的z-index你顯示autosuggested文本並且在下一步驟中顯示哪個用戶在typeded的文本和會給你谷歌的相同的效果。

來源

2011-06-13 20:50:37

如果您希望自動提示的文本顯示爲灰色，並且您輸入的文本爲黑色，那麼對於我來說也很有趣，因爲您無法選擇自動提示的文本，因爲它顯示爲就像添加爲圖像或背景文本字段而不是文本類型。 – 2011-06-13 20:59:23

是的，我已經確認它使用螢火蟲他們使用z-index屬性爲自動創建的文本出現在背景中。聰明的效果 – 2011-06-13 21:05:10

jQuery自動完成在輸入文本框的背景

回答

相關問題