इनपुट टेक्स्ट बॉक्स की पृष्ठभूमि में jQuery स्वत: पूर्ण

Question

मेरे पास एक jQuery टेक्स्ट बॉक्स स्वत: पूर्ण स्क्रिप्ट है जो एक MySQL डेटाबेस क्वेरी करने के लिए एक PHP स्क्रिप्ट का उपयोग करता है। वर्तमान में, परिणाम टेक्स्ट बॉक्स के नीचे प्रदर्शित होता है, हालांकि मैं इसे दिखाना चाहता हूं जैसे कि यह टेक्स्ट बॉक्स में फीका हुआ है। मैं ऐसा कुछ कैसे कर सकता हूं? इसका एक उदाहरण 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 इनपुट का उपयोग करता है, एक ग्रे टेक्स्ट के साथ, और दूसरा काला पाठ वाला। फिर वे ओवरलेड होते हैं ताकि ग्रे टेक्स्ट इनपुट नीचे हो और ब्लैक टेक्स्ट इनपुट शीर्ष पर हो (अधिक जेड-इंडेक्स ऐसा दिखता है)।

वे ग्रे इनपुट में पूर्ण पाठ प्लस सुझाव है और काला इनपुट केवल आपके द्वारा टाइप किए गए कार्यों को प्रदर्शित करता है। उम्मीद है कि यह आपको कोड को समझने में मदद कर सकता है।

<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 और सीएसएस का एक बहुत ही सरलीकृत संस्करण है आप संभवतः इस्तेमाल कर सकते हैं 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 पर अगर नहीं कर रहा हूँ घटना पिछले टेक्स्ट रंग गुण को एक मंद रंग यानी

$ ('# क्वेरी')। सीएसएस ('रंग', 'ग्रे');

इससे टेक्स्ट का रंग भूरे रंग में बदल जाएगा। या आप इसके अस्पष्टता को बदलने की कोशिश भी कर सकते हैं।

आईडी की

शैली

#gray

गूगल द्वारा इस्तेमाल किया।

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

इसलिए पहले चरण में आप z- सूचकांक का उपयोग कर autosuggested पाठ प्रदर्शित और अगले चरण में आप पाठ जो उपयोगकर्ता में typeded प्रदर्शित करने और है कि आप गूगल की एक ही प्रभाव दे देंगे।