입력 텍스트 상자의 배경에 jQuery 자동 완성

Question

PHP 스크립트를 사용하여 MySQL 데이터베이스를 쿼리하는 jQuery 텍스트 상자 자동 완성 스크립트가 있습니다. 현재 결과는 텍스트 상자 아래에 표시되지만 텍스트 상자에 희미하게 표시되도록 표시하려고합니다. 이렇게하면 어떻게 할 수 있습니까? 이에 대한 예는 Google 순간 검색 창에 있습니다.

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

Answer 1

Google은 2 개의 입력을 사용하는 것처럼 보입니다. 하나는 회색 텍스트이고 다른 하나는 검정 텍스트입니다. 그런 다음 회색 텍스트 입력이 아래쪽에 있고 검은 색 텍스트 입력이 맨 위에 오도록 (더 큰 z- 인덱스 모양) 오버레이됩니다.

회색 입력에는 전체 텍스트와 제안이 포함되어 있고 검정 입력에는 입력 한 내용 만 표시됩니다. 바라기를이 코드를 이해하는 데 도움이되기를 바랍니다.

이

<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" /> 

Answer 2

난 다음 그 텍스트 상자의 keyup의 경우 효과를 원하는 위치에 정확하게 확실히 아직 아니다 이벤트를 이전 텍스트 색상 속성을 희미한 색상으로 변경합니다. 즉,

$ ('# 검색어') .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- 색인을 사용 autosuggested 텍스트를 표시하고, 다음 단계에서는 사용자에 typeded 텍스트를 표시하고 그에게 구글의 동일한 효과를 제공한다.