Question

我的目标

实时搜索远程数据下拉列表中的文本和结果（关键字事件下拉列表的执行和结果数据）

我的HTML

        <label class="lbPessoaTipo">Tipo</label>
        <div class="ui selection dropdown search input mini pessoaTipoIdDropdown">
             <input type="hidden" class="input PessoaTipoId" name="PessoaTipoId" tabindex="0">
             <div class="menu"></div>
             <i class="dropdown icon"></i>
             <input class="search input">
             <div class="default text">Pessoa Tipo</div>
        </div>

JS

$.ajax({
    url: base_url("system_data/pessoaTipo"),
    type: "post",
    dataType: "json",
    data:{

    },
    success: function(ret){
        result = ret;
    },
    complete: function(){
        $('.pessoaTipoIdDropdown').dropdown({
            on: 'click',
            //showOnFocus: false,
            fields:{
                name: "text", 
                value: "value" 
            },
                onChange: function(){

                },
                onShow: function(){

                },
                apiSettings:{
                    response:{
                        success: true,
                        results: result
                    }
                }
        }).dropdown("set value",1).dropdown("set text","Pessoa Fisica")

    }
});

enter image description here

Answer 1

我认为您从“system_data / pessoaTipo”返回的结果集返回相同的数据集。看起来您只进行了一次ajax调用并将数据存储到result中。因此，您的下拉列表只知道一个result。

每次在搜索输入中键入新文本时，最好调用一个从服务器查询的异步函数。我不确定语义下拉是如何工作的，但你确定你应该使用它：'click'？如果您正在寻找按键，我不知道点击是否是正在收听的正确事件。

查看semantic-ui API的文档，看起来您可以在apiSettings中使用responseAsync http://semantic-ui.com/behaviors/api.html#/settings

使用您的代码片段，您可以执行类似...

的操作

$('.pessoaTipoIdDropdown').dropdown({
        on: 'click',   // Not sure about this event...
        //showOnFocus: false,
        fields:{
            name: "text", 
            value: "value" 
        },
            onChange: function(){

            },
            onShow: function(){

            },
            apiSettings:{

                responseAsync: function (settings, callback) {
                    var result;
                    var response = {
                        success: true   // docs say you need to return success: true
                    }
                    $.ajax({
                        url: base_url("system_data/pessoaTipo"),
                        type: "post",
                        dataType: "json",
                        data:{

                        },
                        success: function(ret){
                            result = ret;
                        },
                        complete: function(){
                            response.results = result;
                            callback (response);  // Important to call the callback!
                        }
                    }
                }
            }
}).dropdown("set value",1).dropdown("set text","Pessoa Fisica")

我相信您需要传入一个查询，该查询会根据您的搜索参数返回一个新结果。如果您的数据集很小，您可以将结果缓存到某处并从客户端进行过滤。

Answer 2

成功使用get方法。 {query}上的“SysDropdown / dpGepFornecedor？data = {query}”是keyup事件的值。我需要使用post方法发送值。 TY ...

$(".GepPessoaId").dropdown({ 
    forceSelection: false,
    onChange: function(value, text){

    },
    onShow: function(){

    },
    apiSettings: {
        url: base_url("SysDropdown/dpGepFornecedor?data={query}"),
        dataType: "json",
        method: "get"
     }
})

Semantic-ui远程下拉列表不搜索。为什么？

2 个答案: