>我正在使用Ace Editor
>编辑器集成的应用程序,是Objective-C/C++ocoa
>我需要AutoCompletion(针对给定的一组关键字)

现在,这是一个问题：

>我知道AutoCompletion尚未得到本机支持
>我知道其他人的尝试(例如Codiad IDE,Gherkin,Alloy-UI),有些尝试使用Jquery UI Autocomplete – 但我仍然无法弄清楚如何将其改编为现有的Ace设置
>我仍然不确定我是否应该选择面向JS的解决方案,或者只是使用Objective-C/C++ocoa

任何帮助都不仅仅是值得赞赏的.

代码：

var editor = ace.edit('editor');
    editor.setTheme("ace/theme/eclipse");
    editor.getSession().setMode("ace/mode/java");
    editor.setShowInvisibles(true);
    editor.setdisplayIndentGuides(true);
    editor.getSession().setUseWrapMode(true);    
    var jsonUrl = "JSON/Components/proce.json";
    //the url where the json file with the suggestions is present
    var langTools = ace.require("ace/ext/language_tools");
    editor.setoptions({enableBasicAutocompletion: true});
    var rhymeCompleter = {
        getCompletions: function(editor,session,pos,prefix,callback) {
            if (prefix.length === 0) { callback(null,[]); return }
            $.getJSON(jsonUrl,function(wordList) {
                callback(null,wordList.map(function(ea)  {           
                    return {name: ea.word,value: ea.word,Meta: "optional text"}
                }));
            })
        }
    }

    langTools.addCompleter(rhymeCompleter);

Json文件格式：

[ {"word":"hello"},{"word":"good morning"},{"word":"suggestions"},{"word":"auto suggest"},{"word":"try this"}]

参考/演示：

http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview

在@Ziv Weissman和@Fribu的帮助和建议下,我重新编写了整个自动完成功能.

如果有人需要,他/她可以从here下载.

感谢StackOverFlow社区.

我正在创建一个jquery自动完成功能.我创建的功能与单个文本框一起正常工作.但是,只要我在同一页面的另一个文本框中实现它,它就会出现意外行为.它会打开和关闭自动完成列表.

这是我的autofill.js代码：

function setUl(result) {
    var $ul = $('<ul>');
    if (result !== undefined) {
        $.each(result,function (k,v) {
            $ul.append('<li data-value="' + v.value + '">' + v.label + '</li>');
        });
    }
    return $ul;
}
$.fn.autofill = function (options) {
    if (options == undefined) {
        options = {};
    }
    var $currentInput = $(this);
    var autoCompleteData = $currentInput.data('autofill');
    var listId='autofill-' + (new Date().getTime()).toString(16);
    $currentInput.on('keyup focus',function (e) {

        var query = $(this).val();
        var result = $.grep(autoCompleteData,function (v) {
            return v.label.search(new RegExp(query,'i')) !== -1;
        });
        $ul = setUl(result,$currentInput);
        $ul.attr('id',listId);
        $ul.addClass('autofill-show');
        $ul.attr('data-target',$currentInput.attr('id'));
        var position = $currentInput.position();
        $ul.css({
            width: $currentInput.width() + parseInt($currentInput.css('padding-left'),10) + parseInt($currentInput.css('padding-right'),10),position: 'absolute',top: position.top + $currentInput.outerHeight(),left: position.left
        });
        if ($ul.find('li').length >= 6) {
            $ul.css({
                height: '130px','overflow-y': 'scroll'
            });
        }
        if (result !== undefined) {
            if ($(e.target).attr('id') !== $currentInput.attr('id') && $($(e.target).parent()[0]).attr('id') !== listId) {
                destroy($ul);
            }
            $currentInput.after($ul);
        }
        $currentInput.trigger('onChange',[query,result]);
    });
    $(document).on('click','.autofill-show li',function (e) {
        if($ul!==undefined && $($(this).parent()[0]).attr('id')==$ul.attr('id')){
            $ul.trigger('onSelect',[$(this).text(),$(this).data('value')]);
        }
        e.stopImmediatePropagation();
    });
    $(document).on('onSelect','#'+listId,function (e,label,value) {
        $currentInput.val(label);
        if ($.isFunction(options.onSelect)) {
            options.onSelect(label,value);
        }
        if ($(e.target).attr('id') !== $currentInput.attr('id') && $($(e.target).parent()[0]).attr('id') !== listId) {
            destroy($ul);
        }
        e.stopImmediatePropagation();
    });
    $(document).on('onChange','#'+$currentInput.attr('id'),query,result) {
        if($ul!==undefined && $($(this).parent()[0]).attr('id')==$ul.attr('id')) {
            result = $.grep(autoCompleteData,function (v) {
                return v.label.search(new RegExp('\^' + query + '\$',"gi")) !== -1;
            });
            if ($.isFunction(options.onChange)) {
                options.onChange(query,result[0]);
            }
        }
        e.stopImmediatePropagation();
    });
    $(document).on('click',function (e) {
        console.log($(e.target));
        if ($(e.target).attr('id') !== $currentInput.attr('id') && $($(e.target).parent()[0]).attr('id') !== listId) {
            destroy($ul);
        }
        e.stopImmediatePropagation();
    });
};
function destroy($ul) {
    $ul.remove();
}

这是我的css：

.autofill-show{
    list-style: outside none none;
    padding: 0;
    border: 1px solid #ccc;
    margin:0;
    z-index: 9999999;
}
.autofill-show li{
    border: 1px solid #ccc;
    text-align: center;
    background: #fff;
}

.autofill-show li:hover{
    background: #9bcea3;
    cursor: pointer;
}

这就是我调用函数的方式：

$('#autofill').autofill();
$('#autofill_2').autofill();

这是小提琴链接. https://jsfiddle.net/saineshmamgain/cs6g13q9/2/

一种解决方案可以是为创建的UL添加唯一ID,而不是“基于日期时间”.
每次您将破坏特定ID,并重新创建它.
事件将通过HTML(添加onclick = …)触发,并使用jQUERY以当前/父级别进行触发.

我已经更新了这个fiddle

它可能有你的小提琴剩下的东西,我没有时间去完善……我会留给你.

解决方案看起来像这样：

function setUl(result) {
    var $ul = $('<ul>');
    if (result !== undefined) {
        $.each(result,v) {
            $ul.append('<li data-value="' + v.value + '" onclick="clickHandle(this)">' + v.label + '</li>');
        });
    }
    return $ul;
}

function clickHandle(ele){
var label = $(ele).text();
var value = $(ele).data('value');
var inputId = $(ele).parent("ul").attr("data-target");
$('#'+inputId).val(label);
        if ($.isFunction(options.onSelect)) {
            options.onSelect(label,value);
        }
}

$.fn.autofill = function (options) {
    if (options == undefined) {
        options = {};
    }
    var $currentInput = $(this);
    console.log($($currentInput).attr('id'));
    var autoCompleteData = $currentInput.data('autofill');
    var listId='autofill_' + $currentInput.attr('id');
    $currentInput.on('keyup focus','i')) !== -1;
        });
        if($('#'+listId)){
          $('#'+listId).remove();
        }
        $ul = setUl(result,'overflow-y': 'scroll'
            });
        }
        if (result !== undefined) {
            destroy($ul);
            $currentInput.after($ul);
        }
        $currentInput.trigger('onChange',result]);
    });  
    //end key up 

    $('#'+listId).on('onSelect',value);
        }
        destroy($ul);
        e.stopImmediatePropagation();
    });
    $(document).on('onChange',result[0]);
            }
        }
        e.stopImmediatePropagation();
    });
    $currentInput.on('blur',function (e) {
        window.setTimeout(function(){
        destroy($ul);
        },100);
    });
};
function destroy($ul) {
    $ul.remove();
}