script.aculo.us - ऑटो समापन

बॉक्स से बाहर, script.aculo.us ऑटो-समापन के लिए दो स्रोतों का समर्थन करता है -

दूरस्थ स्रोत (अजाक्स के माध्यम से प्राप्त),
स्थानीय स्रोत (आपके वेब पेज की स्क्रिप्ट में स्ट्रिंग सरणियाँ)।

आप जिस स्रोत का उपयोग करने की योजना बना रहे हैं, उसके आधार पर, आप क्रमशः Ajax.Autocompleter या Autocompleter.Local को इंस्टाल करेंगे । हालांकि विशिष्ट विकल्पों से सुसज्जित, ये दो ऑब्जेक्ट एक बड़ी सुविधा सेट साझा करते हैं और एक समान उपयोगकर्ता अनुभव प्रदान करते हैं।

इन वस्तुओं को बनाते समय चार चीजें होती हैं -

वह टेक्स्ट फ़ील्ड जिसे आप स्वतः पूर्ण बनाना चाहते हैं। हमेशा की तरह, आप फ़ील्ड को स्वयं या उसकी id = विशेषता के मान को पास कर सकते हैं।
स्वत: पूर्णता विकल्पों के लिए कंटेनर, जिसे चुनने के लिए विकल्पों की एक <ul> </ li> सूची होगी। फिर से, तत्व को सीधे या इसके पास करेंid =। यह तत्व अक्सर एक सरल <div> </ p> </ li> है
डेटा स्रोत, जिसे स्रोत प्रकार के आधार पर, स्ट्रिंग के जावास्क्रिप्ट सरणी या दूरस्थ स्रोत के URL के रूप में व्यक्त किया जाएगा।
अंत में, विकल्प। हमेशा की तरह, उन्हें कई प्रकार के हैश के रूप में प्रदान किया जाता है, और दोनों स्वतः पूर्णता वाली वस्तुएँ बिना किसी कस्टम विकल्प के कर सकती हैं; सब कुछ के लिए उपयुक्त चूक हैं।

Script.aculo.us की स्वत: पूर्णता क्षमताओं का उपयोग करने के लिए, आपको प्रोटोटाइप.js मॉड्यूल के साथ controls.js और effects.js मॉड्यूल को लोड करना होगा। तो, script.aculo.us के लिए आपकी न्यूनतम लोडिंग इस तरह दिखाई देगी -

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

एक अजाक्स ऑटो कम्प्लीटर बनाना

निर्माण सिंटैक्स निम्नानुसार है -

new Ajax.Autocompleter(element, container, url [ , options ] )

Ajax.Autocompleter के लिए निर्माता चार मापदंडों को स्वीकार करता है -

तत्व नाम या एक पाठ क्षेत्र का संदर्भ जो एक डेटा विकल्प के साथ आबाद किया जाना है।
नियंत्रण द्वारा पसंद के मेनू के रूप में उपयोग किया जाने वाला तत्व नाम या संदर्भ <div> तत्व।
सर्वर-साइड संसाधन का URL जो विकल्पों की आपूर्ति करेगा।
सामान्य विकल्प हैश।

विकल्प

अपनी Ajax.Autocompleter ऑब्जेक्ट बनाते समय आप निम्न विकल्पों में से एक या अधिक का उपयोग कर सकते हैं।

अनु क्रमांक	विकल्प और विवरण
1	paramName सर्वर-साइड संसाधन पर पोस्ट किए गए पाठ फ़ील्ड की सामग्री वाले क्वेरी पैरामीटर का नाम। पाठ क्षेत्र के नाम की कमी।
2	minChars पसंद के लिए सर्वर-साइड अनुरोध से पहले दर्ज किए जाने वाले वर्णों की संख्या को बंद किया जा सकता है। 1 से चूक।
3	Frequency आंतरिक जांच के बीच, सेकंड में अंतराल, यह देखने के लिए कि क्या सर्वर-साइड संसाधन के लिए अनुरोध पोस्ट किया जाना चाहिए। 0.4 की कमी।
4	Indicator किसी तत्व का आईडी या संदर्भ, जबकि विकल्पों के लिए एक सर्वर-साइड अनुरोध चल रहा है। यदि छोड़ा गया है, तो कोई तत्व प्रकट नहीं होता है।
5	Parameters एक पाठ स्ट्रिंग जिसमें सर्वर-साइड संसाधन को पारित करने के लिए अतिरिक्त क्वेरी पैरामीटर हैं।
6	updateElement कॉलबैक फ़ंक्शन को ट्रिगर किया जाना चाहिए जब उपयोगकर्ता उस सर्वर से लौटे विकल्पों में से एक का चयन करता है जो आंतरिक फ़ंक्शन को बदलता है जो चुने हुए मान के साथ पाठ फ़ील्ड को अपडेट करता है।
7	afterUpdateElement अद्यतन कॉल फ़ंक्शन को निष्पादित किए जाने के बाद कॉलबैक फ़ंक्शन को ट्रिगर किया जाएगा।
8	Tokens एक एकल टेक्स्ट स्ट्रिंग, या टेक्स्ट स्ट्रिंग्स की सरणी जो कि संकेत देती है कि कई तत्वों को पाठ क्षेत्र में प्रवेश करने की अनुमति देने के लिए उपयोग किया जाता है, जिनमें से प्रत्येक को व्यक्तिगत रूप से ऑटो-पूरा किया जा सकता है।

उदाहरण

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.Autocompleter(
               'autoCompleteTextField',
               'autoCompleteMenu',
               '/script.aculo.us/serverSideScript.php', {}
            );
         }
      </script>
   </head>
   
   <body>
      <p>Type something in this box and then select suggested option from the list </p>

      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>
   </body>
</html>

अब, हमें इस पृष्ठ तक पहुंचने और डेटा स्रोत URL (serverSideScript.php) की सेवा करने के लिए एक सर्वर साइड की आवश्यकता है। आप इस स्क्रिप्ट में सुझाव प्रदर्शित करने के लिए एक पूर्ण तर्क रखेंगे।

उदाहरण के लिए, हम serverSideScript.php में एक साधारण HTML पाठ रख रहे हैं । आप सीजीआई, पीएचपी, रूबी, या किसी भी अन्य सर्वर साइड स्क्रिप्टिंग का उपयोग करके अपनी स्क्रिप्ट लिख सकते हैं, उपयुक्त सुझाव चुन सकते हैं और उन्हें <ul> <li> ... </ li> </ ul> के रूप में प्रारूपित कर उन्हें वापस पास कर सकते हैं। कॉलर प्रोग्राम के लिए।

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
   <li>Six</li>
</ul>

यह निम्नलिखित परिणाम देगा -

उपरोक्त तालिका में विभिन्न विकल्पों पर चर्चा की गई है।

एक स्थानीय ऑटो-कम्प्लीटर बनाना

जैसा कि हमने पिछले भाग में चर्चा की है, अजाक्स ऑटो-कंपाइलर बनाने के लिए एक स्थानीय ऑटो-कंपाइलर बनाना लगभग समान है।

प्रमुख अंतर यह है कि ऑटो-पूरा करने के लिए उपयोग किए जाने वाले बैकिंग डेटा को नियंत्रण में कैसे पहचाना जाता है।

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

पूरा निर्माण सिंटैक्स वास्तव में इस प्रकार है -

new Autocompleter.Local(field, container, dataSource [ , options ] );

Autocompleter.Local के लिए निर्माता चार मापदंडों को स्वीकार करता है -

तत्व नाम या एक पाठ क्षेत्र का संदर्भ जो एक डेटा विकल्प के साथ आबाद किया जाना है।
नियंत्रण द्वारा पसंद के मेनू के रूप में उपयोग किया जाने वाला तत्व नाम या संदर्भ <div> तत्व
तीसरे पैरामीटर के लिए, सर्वर-असिस्टेड ऑटो-कंपाइलर के साथ URL के बजाय, हम एक छोटे स्ट्रिंग सरणी की आपूर्ति करते हैं, जिसमें सभी संभावित मान शामिल हैं।
सामान्य विकल्प हैश।

विकल्प

आप अपना ऑटोकंप्लीटर.लोक ऑब्जेक्ट बनाते समय निम्नलिखित में से एक या अधिक विकल्पों का उपयोग कर सकते हैं।

अनु क्रमांक	विकल्प और विवरण
1	Choices प्रदर्शित करने के लिए विकल्पों की संख्या। 10 से चूक।
2	partialSearch पूर्ण स्ट्रिंग्स के भीतर एम्बेडेड शब्दों की शुरुआत में मिलान करने में सक्षम करता है। सत्य की अवहेलना।
3	fullSearch पूर्ण स्ट्रिंग्स के भीतर कहीं भी मिलान करने में सक्षम करता है। झूठे की अवहेलना।
4	partialChars किसी भी आंशिक मिलान का प्रयास करने से पहले टाइप किए जाने वाले वर्णों की संख्या निर्धारित करता है। 2 से चूक।
5	ignoreCase मिलान करते समय मामले को अनदेखा करता है। सत्य की अवहेलना।

उदाहरण

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Autocompleter.Local(
               'autoCompleteTextField',
               'autoCompleteMenu',
               ['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
               {ignoreCase:false}
            );
         }
      </script>
   </head>

   <body>
      <p>Type something in this box and then select suggested option from the list </p>
		
      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>		
   </body>
</html>

जब प्रदर्शित किया जाता है, और वर्ण 'a' को टेक्स्ट बॉक्स में टाइप किया जाता है, तो यह सभी मिलान विकल्पों को प्रदर्शित करता है।

उपरोक्त तालिका में चर्चा किए गए विभिन्न विकल्पों के साथ कोड की बेहतर समझ के लिए हमारे ऑनलाइन कंपाइलर का उपयोग करें।

यह निम्नलिखित परिणाम देगा -