2016-04-15 4 views
5

मैं CodeMirror पर हुक करने की कोशिश कर रहा हूं और स्वत: पूर्णता में प्रकट होने के लिए शब्दों की अपनी सूची प्लग कर रहा हूं। इस लिंक के आधार पर https://stackoverflow.com/a/19269913/2892746 मैंने निम्नलिखित को लागू करने का प्रयास किया। मैंने JSBin with itCodeMirror कस्टम संकेत सूची ठीक से काम नहीं कर रही है

समस्या यह है कि मेरे शब्द स्वत: पूर्ण में दिखाई देते हैं, लेकिन उन्हें सही ढंग से फ़िल्टर नहीं किया जाता है। उदाहरण के लिए, मैं "f" टाइप करता हूं, और फिर मैं ctrl + space करता हूं। लेकिन मुझे "mariano" के साथ पॉपअप में सभी 3 शब्द मिलते हैं। मैं केवल "फ्लोरेंसिया" उपलब्ध और चयनित होने की उम्मीद करता हूं।

कोई विचार क्या मैं गलत कर सकता हूं?

ps: हाँ, मुझे anyword संकेत नहीं बदलना अच्छा लगेगा और अपना खुद का प्रदान करें जो बस मेरे अपने शब्दों से मेल खाता है, लेकिन मुझे नहीं पता कि यह कैसे करना है।

अग्रिम धन्यवाद !!

+0

आप अपने प्रश्न के लिए जवाब पता था करते हैं? मुझे एक ही समस्या है और उत्तर @Mariano Martinez Peck – sam

+0

पर एक उत्तर पर मैंने अभी अपने प्रश्न का उत्तर दिया है। अगर मुझे मदद मिली तो मुझे बताएं। –

उत्तर

1

मैंने अंत में इसे स्वयं हल कर लिया है। मैं एक जेएस विशेषज्ञ नहीं हूं, लेकिन अगर मैं किसी और के लिए उपयोगी हूं तो मैं अपना समाधान साझा करता हूं।

महत्वपूर्ण: मुझे this project से मूल कोड मिला। वह परियोजना कोणीय और कोणीय-कोडिमिरर निर्भरता के साथ थी। मैं अपने ऐप में कहीं भी कोणीय का उपयोग नहीं कर रहा था इसलिए मैंने इसे कोणीय के बिना इसका उपयोग करने के लिए निकाला और समायोजित किया।

लक्ष्य लक्ष्य के शब्दकोश/मानचित्र को परिभाषित करने में सक्षम होना है जिसका उपयोग स्वत: पूर्ण के लिए किया जाएगा। समाधान बहुत आसान है। myTextAreaId तत्व के एक माता पिता पर आप इस प्रकार का काल/div बनाना चाहिए:

<div class="codeMirrorDictionaryHintDiv" codemirror-dictionary-hint="[ 'Soccer', 'Cricket', 'Baseball', 'Kho Kho' ]"></div> 

फिर ... कोड, सीएसएस वर्ग codeMirrorDictionaryHintDiv साथ closest तत्व देखने जाएगा, विशेषता codemirror-dictionary-hint निकाल देंगे, में मूल्यांकन करेंगे कि इसके बारे में जावास्क्रिप्ट सरणी प्राप्त करने के लिए ऑर्डर करें, और उसके बाद बस इशारा फ़ंक्शन के लिए इनपुट डिक्शनरी के रूप में सेट करें।

कोड है:

var dictionary = []; 

var dictionary = eval($('#myTextAreaId').closest('.codeMirrorDictionaryHintDiv').attr('codemirror-dictionary-hint')); 
if (dictionary == null) { 
    dictionary = []; 
}; 


// Register our custom Codemirror hint plugin. 
CodeMirror.registerHelper('hint', 'dictionaryHint', function(editor) { 
    var cur = editor.getCursor(), 
     curLine = editor.getLine(cur.line); 
    var start = cur.ch, 
     end = start; 
    while (end < curLine.length && /[\w$]+/.test(curLine.charAt(end))) ++end; 
    while (start && /[\w$]+/.test(curLine.charAt(start - 1))) --start; 
    var curWord = start != end && curLine.slice(start, end); 
    var regex = new RegExp('^' + curWord, 'i'); 
    return { 
     list: (!curWord ? [] : dictionary.filter(function(item) { 
      return item.match(regex); 
     })).sort(), 
     from: CodeMirror.Pos(cur.line, start), 
     to: CodeMirror.Pos(cur.line, end) 
    } 
}); 

CodeMirror.commands.autocomplete = function(cm) { 
    CodeMirror.showHint(cm, CodeMirror.hint.dictionaryHint); 
}; 
संबंधित मुद्दे