Google सुझाव-जैसे इनपुट फ़ील्ड को कैसे कार्यान्वित करें?

Question

मैं वर्तमान में अपने स्वयं के स्वत: पूर्ण/सुझाव स्क्रिप्ट पर काम कर रहा हूं और मैं अपने मुख्य साइट पर Google के समान प्रभाव प्राप्त करना चाहता हूं।

जब उपयोगकर्ता टाइपिंग शुरू करता है (उदाहरण के लिए stack), 4 सुझाव नीचे एक ड्रॉपडाउन सूची पर दिखाई देते हैं लेकिन ... साथ ही, शीर्ष पर मौजूद एक व्यक्ति ग्रे रंग में इनपुट फ़ील्ड में "इन" दिखाता है :

कैसे यह संभव अन्य स्ट्रिंग इनपुट में एक अलग शैली के साथ डाल करने के लिए चाहते हैं?

क्या यह मूल्य के साथ इनपुट पर <span> है? जब मैं स्ट्रिंग के ग्रे हिस्से पर क्लिक करता हूं तो इनपुट फ़ील्ड को फोकस नहीं मिलता है, इसलिए मेरा मानना ​​है कि इसमें कुछ होना चाहिए।

वास्तव में यह एक <span> (या किसी अन्य <div>) तो इनपुट से अधिक बैठे है कि वे किस तरह पता है जहां स्ट्रिंग के पहले भाग (stack) इस मामले में समाप्त होता है और जहां स्थिति (चौड़ाई) overflow शब्द (करना)।

क्या कोई इस प्रभाव को प्राप्त करने के बारे में जानता है?

Answer 1

कोड का निरीक्षण करने के बाद, मैंने पाया है कि यह input फ़ील्ड है जो input फ़ील्ड के शीर्ष पर है। स्वत: पूर्ण input फ़ील्ड को अक्षम करने के लिए सेट किया गया है, इसे भूरे रंग का रंग दिया गया है।

इस विधि का उपयोग करने के लिए उन्हें गणना करने की आवश्यकता नहीं है कि स्ट्रिंग समाप्त होने पर आपके ऊपर कहां समाप्त होता है, बस ऑटोकॉमिलेट input फ़ील्ड पर वास्तविक input फ़ील्ड को बिल्कुल सही स्थिति में रखें।

उदाहरण:

अद्यतन

यहाँ एक त्वरित प्रदर्शन http://jsfiddle.net/dargf/
बेशक , आप अपने खुद के स्वत: पूर्ण जावास्क्रिप्ट में जोड़ना होगा है, लेकिन उस शैली का एक उदाहरण है ।

एचटीएमएल

<div> 
    <input id="main" type="text" /> 
    <input id="autocomplete" type="text" disabled="disabled" /> 
</div> 

सीएसएस

div 
{ 
    position: relative; 
} 
#main{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 11; 
    background: transparent; 

} 
#autocomplete{ 
    position: absolute;  
    top: 0; 
    left: 0; 
    background: transparent; 
    z-index: 10; 
} 

Javascsript

$('#main').keyup(function(e){ 
    console.log(e); 
    $('#autocomplete').val($(this).val() + 'asdf') 
}); 

Answer 2

इस प्रयास करें: jQuery autocomplete in background of input text box

ग्रे में पीछे एक और सामने पारदर्शी में से एक के साथ दो आदानों की तरह लग रहा। पर नीचे

Answer 3

देखो:

http://net.tutsplus.com/tutorials/javascript-ajax/adding-a-jquery-auto-complete-to-your-google-custom-search-engine/

या

http://www.programmers.org/index.php/2009/12/jquery-google-suggest-jquerygsuggestjs/

यह मदद मिलेगी।

Answer 4

खोज इनपुट पारदर्शी बा है सीकेग्राउंड, और सुझाव के मूल्य के साथ एक और अक्षम इनपुट फ़ील्ड (निचला जेड-इंडेक्स के साथ) है, इसलिए अक्षम फ़ील्ड में आप केवल ग्रे भाग देखते हैं (पूरा टेक्स्ट है लेकिन मुख्य इनपुट में अक्षरों के रूप में नहीं देखा जा सकता है काला रंग)।

दोनों एक ही स्थिति में बिल्कुल स्थित हैं।