जावास्क्रिप्ट/HTML स्वत: पूर्ण पाठ बॉक्स

Question

मैं एक वेब पेज जो कई स्वत: पूर्ण बक्सें की एक आवश्यकता है विकासशील कर रहा हूँ। जैसा कि मैं जावास्क्रिप्ट में नया हूं, मेरे लिए अपना स्वतः पूर्ण टेक्स्टबॉक्स बनाना बहुत कठिन है। तो मैंने इंटरनेट से कई उदाहरण खोजे हैं, लेकिन वे केवल एक ही टेक्स्टबॉक्स के लिए काम करते हैं। इसका मतलब है कि मैं एक और स्वत: पूर्ण टेक्स्टबॉक्स बनाने के लिए एक ही जेएस फ़ाइल का उपयोग नहीं कर सकता। मुझे स्टैक ओवरफ्लो पर ऐसे कोई उदाहरण नहीं मिला। क्या कोई इस में मेरी मदद कर सकता है?

Autosuggest प्लगइन के साथ

Answer 1

उपयोग JQuery।

http://docs.jquery.com/Plugins/autocomplete

शामिल जे एस पुस्तकालयों (प्रलेखन ऊपर देखें), तो HTML में ऐसा करते हैं:

<input type="text" class="autocomplete" name="n1" /> 
<input type="text" class="autocomplete" name="n2" /> 
<input type="text" class="autocomplete" name="n3" /> 
<input type="text" class="autocomplete" name="n4" /> 

फिर अपने जावास्क्रिप्ट में सीएसएस श्रेणी के लिए एक स्वत: पूर्ण जोड़ें:

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" "); 
$(".autocomplete").autocomplete(data); 

Answer 2

यदि आप वेब विकास के लिए नए हैं तो मैं आपको jquery और jqueryUI package का उपयोग करने की सलाह दूंगा। ऊपर दिया गया लिंक डेमो पृष्ठ है जहां आप विभिन्न प्रकार के डेटा स्रोतों के साथ खेल सकते हैं। मैं एक उदाहरण है जो एक डेटा स्रोत

<script> 
    $(function() { 
     var availableTags = [ 
      "ActionScript",   "AppleScript", 
      "Asp",    "BASIC", 
      "C",    "C++", 
      "Clojure",    "COBOL", 
      "ColdFusion",   "Erlang", 
      "Fortran",    "Groovy", 
      "Haskell",    "Java", 
      "JavaScript",   "Lisp", 
      "Perl",    "PHP", 
      "Python",    "Ruby", 
      "Scala",    "Scheme" 
     ]; 
     $(".tags").autocomplete({ 
      source: availableTags 
     }); 
    }); 
    </script> 

<div><input class="tags" type="text" /></div> 
<div><input class="tags" type="text" /></div> 

Answer 3

AutoSuggest प्लगइन पदावनत किया गया है और अब jQuery यूआई में शामिल है के रूप में सरल सरणी का उपयोग करता कॉपी किया है।

इस चेक आउट:
http://jqueryui.com/demos/autocomplete/

Answer 4

मैं इस जांच करने के लिए सलाह देते हैं:

http://complete-ly.appspot.com/

सरल मामले में अपनी आवश्यकताओं को पूरा करना चाहिए:

var cly = completely(document.getElementById('a-div-wrapping-your-autocomplete-box'); 
cly.options = [ 'your','array','of','options','(possibly sorted somehow)']; 

Answer 5

यहाँ एक आसान तरीका है , बस onkeyup घटना का उपयोग करें:

+०१२३५१६४१०६१

<input type="text" id="a" onkeyup="myFunction()"> 
<br/> 
<br/> 


<script type="text/javascript"> 
function myFunction() { 

    var x = document.getElementById("a").value; 

    document.getElementById("abc").innerHTML = x; 
} 
</script> 

Answer 6

यहाँ कोई jQuery या नहीं जावास्क्रिप्ट के साथ स्वत: पूर्ण बनाने के लिए एक समाधान है .. सादे html5 एक इनपुट बॉक्स और एक DataList टैग ..

<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox--> 
<datalist id="languageList"> 
<option value="HTML" /> 
<option value="CSS" /> 
<option value="JavaScript" /> 
<option value="SQL" /> 
<option value="PHP" /> 
<option value="jQuery" /> 
<option value="Bootstrap" /> 
<option value="Angular" /> 
<option value="ASP.NET" /> 
<option value="XML" /> 
</datalist> 

अधिक दुबला यह here