किसी भी कुंजीपटल के बाद कोडमिरर स्वतः पूर्ण?

Question

मैं एक कस्टम स्वत: पूर्ण जोड़ने की कोशिश करने पर काम कर रहा हूं, जब भी उपयोगकर्ता टाइप कर रहा है (निश्चित रूप से कॉन्फ़िगर करने योग्य) ट्रिगर करना चाहता हूं। मैं CodeMirror लिए स्वत: पूर्ण के कुछ उदाहरण मिल गया है:

http://codemirror.net/demo/complete.html और http://codemirror.net/demo/xmlcomplete.html

लेकिन विशिष्ट कुंजी (एक के लिए Control-अंतरिक्ष और अन्य के लिए '<') पर इन ट्रिगर के दोनों और दोनों का उपयोग घटनाओं को संसाधित करने के लिए extraKeys कार्यक्षमता, लेकिन मैं किसी भी कुंजी से ट्रिगर करना चाहता हूं। मैंने निम्नलिखित कोशिश की है:

 var editor = CodeMirror.fromTextArea(document.getElementById("code"), 
     { 
      lineNumbers: true, 
      mode: "text/x-mysql", 
      fixedGutter: true, 
      gutter: true, 
//   extraKeys: {"'.'": "autocomplete"} 
      keyup: function(e) 
      { 
       console.log('testing'); 
      }, 
      onkeyup: function(e) 
      { 
       console.log('testing2'); 
      } 
     }); 

लेकिन कोई भाग्य नहीं है। किसी भी कुंजीपटल घटनाओं से मैं कैसे ट्रिगर कर सकता हूं इस पर कोई सुझाव?

Answer 1

onKeyEvent: function(e , s){ 
       if (s.type == "keyup") 
       { 
        console.log("test"); 
       } 
      } 

Answer 2

भी स्वत: पूर्ण विजेट प्रदर्शित करने के लिए:

onKeyEvent: function (e, s) { 
    if (s.type == "keyup") { 
     CodeMirror.showHint(e); 
    } 
} 

Answer 3

editor.on('keyup', function(){ 
    CodeMirror.commands.autocomplete(editor); 
}); 

यह जहाँ तक मैंने देखा है

Answer 4

editor.on("inputRead",function(cm,changeObj){ 
    // hinting logic 
}) 

काम करता है हो सकता है, "inputRead" दिखाने के लिए सबसे अच्छा कार्यक्रम है "कोडमिरर" में "ऑटो समापन"। एकमात्र कमी यह है कि आप बैकस्पेस पर संकेत नहीं दिखा सकते हैं या हटा सकते हैं।

Answer 5

संस्करण 5.7 के लिए पहले प्रस्तावित समाधानों में से कोई भी मेरे लिए ठीक काम नहीं करता है (और मुझे लगता है कि उनके पास पिछले संस्करणों के लिए भी बग है)। मेरे समाधान:

myCodeMirror.on("keyup", function (cm, event) { 
     if (!cm.state.completionActive && /*Enables keyboard navigation in autocomplete list*/ 
      event.keyCode != 13) {  /*Enter - do not open autocomplete list just after item has been selected in it*/ 
      CodeMirror.commands.autocomplete(cm, null, {completeSingle: false}); 
     } 
    }); 

यह कैसे काम करता:

यह स्वत: पूर्ण पॉपअप केवल अगर यह अभी तक नहीं खोला है खोलता है (अन्यथा कुंजीपटल नेविगेशन फिर से चुने गए 1 आइटम के साथ पॉपअप को फिर से खोलने की वजह से होता है) ।

जब आप दर्ज आप पॉपअप बंद करना चाहते हैं पर क्लिक करें तो यह एक चरित्र है जो स्वतः पूर्ण प्रारंभ नहीं करना चाहिए की विशेष मामला है (यदि आप एक मामले पर विचार कर सकते हैं जब आप खाली पंक्ति के लिए antocompletion दिखाने के लिए हालांकि चाहते हैं)।

फिर अंतिम फिक्स completeSingle: false सेट कर रहा है जो कुछ शब्द टाइप करते समय केस को रोकता है और बीच में यह स्वचालित रूप से पूरा हो जाता है और आप प्रतिबिंब द्वारा टाइपिंग जारी रखते हैं। तो उपयोगकर्ता को हमेशा पॉपअप से इच्छित स्ट्रिंग का चयन करने की आवश्यकता होगी (भले ही यह एकल विकल्प हो)।

Answer 6

सबसे IntelliSense की तरह व्यवहार इस के द्वारा प्राप्त किया जा सकता है:

स्क्रिप्ट और शैलियों को शामिल करें:

var ExcludedIntelliSenseTriggerKeys = 
{ 
    "8": "backspace", 
    "9": "tab", 
    "13": "enter", 
    "16": "shift", 
    "17": "ctrl", 
    "18": "alt", 
    "19": "pause", 
    "20": "capslock", 
    "27": "escape", 
    "33": "pageup", 
    "34": "pagedown", 
    "35": "end", 
    "36": "home", 
    "37": "left", 
    "38": "up", 
    "39": "right", 
    "40": "down", 
    "45": "insert", 
    "46": "delete", 
    "91": "left window key", 
    "92": "right window key", 
    "93": "select", 
    "107": "add", 
    "109": "subtract", 
    "110": "decimal point", 
    "111": "divide", 
    "112": "f1", 
    "113": "f2", 
    "114": "f3", 
    "115": "f4", 
    "116": "f5", 
    "117": "f6", 
    "118": "f7", 
    "119": "f8", 
    "120": "f9", 
    "121": "f10", 
    "122": "f11", 
    "123": "f12", 
    "144": "numlock", 
    "145": "scrolllock", 
    "186": "semicolon", 
    "187": "equalsign", 
    "188": "comma", 
    "189": "dash", 
    "190": "period", 
    "191": "slash", 
    "192": "graveaccent", 
    "220": "backslash", 
    "222": "quote" 
} 

EditorInstance.on("keyup", function(editor, event) 
{ 
    var __Cursor = editor.getDoc().getCursor(); 
    var __Token = editor.getTokenAt(__Cursor); 

    if (!editor.state.completionActive && 
     !ExcludedIntelliSenseTriggerKeys[(event.keyCode || event.which).toString()] && 
     (__Token.type == "tag" || __Token.string == " " || __Token.string == "<" || __Token.string == "/")) 
    { 
     CodeMirror.commands.autocomplete(editor, null, { completeSingle: false }); 
    } 
}); 

Answer 7

मुझे एक पूर्ण उदाहरण है कि किसी भी KeyUp के बाद (छत्ता एसक्यूएल के लिए) स्वत: पूर्ण होता है साझा करते हैं:

<link rel="stylesheet" href="/static/codemirror/lib/codemirror.css"> 
<link rel="stylesheet" href="/static/codemirror/theme/material.css"> 
<link rel="stylesheet" href="/static/codemirror/addon/hint/show-hint.css" /> 

<script type="text/javascript" src="/static/codemirror/lib/CodeMirror.js"></script> 
<script type="text/javascript" src="/static/codemirror/mode/sql/sql.js"></script> 
<script type="text/javascript" src="/static/codemirror/addon/hint/show-hint.js"></script> 
<script type="text/javascript" src="/static/codemirror/addon/hint/sql-hint.js"></script> 

एचटीएमएल:

<textarea id="code" name="code" rows="4" placeholder="" value=""></textarea> 

स्क्रिप्ट:

<script> 

    $(function() { 
     initSqlEditor(); 
     initAutoComplete(); 
    }); 

    // init sql editor 
    function initSqlEditor() { 

     var editor = CodeMirror.fromTextArea(document.getElementById('code'), { 
      autofocus: true, 
      extraKeys: { 
       "Tab": "autocomplete" 
      }, 
      hint: CodeMirror.hint.sql, 
      lineNumbers: true, 
      mode: 'text/x-hive', 
      lineWrapping: true, 
      theme: 'material', 
     }); 

     editor.on('keyup', function(editor, event){ 
      // type code and show autocomplete hint in the meanwhile 
      CodeMirror.commands.autocomplete(editor); 
     }); 
    } 

    /** 
    * Init autocomplete for table name and column names in table. 
    */ 
    function initAutoComplete() { 

     CodeMirror.commands.autocomplete = function (cmeditor) { 

      CodeMirror.showHint(cmeditor, CodeMirror.hint.sql, { 

       // "completeSingle: false" prevents case when you are typing some word 
       // and in the middle it is automatically completed and you continue typing by reflex. 
       // So user will always need to select the intended string 
       // from popup (even if it's single option). (copy from @Oleksandr Pshenychnyy) 
       completeSingle: false, 

       // there are 2 ways to autocomplete field name: 
       // (1) table_name.field_name (2) field_name 
       // Put field name in table names to autocomplete directly 
       // no need to type table name first. 
       tables: { 
        "table1": ["col_A", "col_B", "col_C"], 
        "table2": ["other_columns1", "other_columns2"], 
        "col_A": [], 
        "col_B": [], 
        "col_C": [], 
        "other_columns1": [], 
        "other_columns2": [], 
       } 
      }); 
     } 
    } 

</script> 

Answer 8

, ऑलेक्ज़ेंडर Pshenychnyy का जवाब एक छोटा सा (here देखें) बदल का जवाब के रूप में मैं नहीं टिप्पणियाँ अभी तक

कोड के नीचे भी अनावश्यक स्थितियों

में आने से स्वत: पूर्ण बंद हो जाता है जोड़ सकते हैं

editor.on("keyup", function (cm, event) { 
if (!cm.state.completionActive && /*Enables keyboard navigation in autocomplete list*/ 
    event.keyCode != 13 &&   /*Enter - do not open autocomplete list just after item has been selected in it*/ 
    event.keyCode != 16 &&  //not for shift 
    event.keyCode != 17 &&  //not for ctrl 
    event.keyCode != 18 &&  //not for alt 
    event.keyCode != 60 &&  //not for <or> 
    event.keyCode != 32 &&  //not for the space key 
    event.keyCode != 8 &&  //not for the backspace key 
    event.keyCode != 9){  //not for the tab key 
     CodeMirror.commands.autocomplete(cm, null, {completeSingle: false}); 
    } 
}); 

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