修剪autoCompletefb中显示的字符串

时间:2013-06-25 07:56:12

标签: jquery jquery-plugins

我通过附加像这样的uuids来发送名字

hari_8053dd70-da5a-11e2-90a9-8d5bc608c78f

我在autoCompletefb中显示它。当在下拉列表中选择一个值时,我将字符串用'_'拆分并取出uuid。但我的问题是整个字符串显示在下拉列表中。如何在下拉列表中仅显示名称,但是stil能够在选择时使用整个字符串吗?请帮忙

我的代码

    jQuery.fn.autoCompletefb = function(options) 
{
    var tmp = this;
    var settings = 
    {
        ul         : '',
        urlLookup  : [""],
        acOptions  : {},
        foundClass : ".acfb-data",
        inputClass : ".acfb-input"

    }
    if(options) jQuery.extend(settings, options);

    var acfb = 
    {
        params  : settings,
        getData : function()
        {   
            var result = '';
            $(settings.foundClass,tmp).each(function(i)
            {
                if (i>0)result+=',';
                result += $('span',this).html();
            });
            return result;
        },
        clearData : function()
        {   
            $(settings.foundClass,tmp).remove();
            $(settings.inputClass,tmp).focus();
            return tmp.acfb;
        },
        removeFind : function(o){
            $(o).unbind('click').parent().remove();
            $(settings.inputClass,tmp).focus();
            return tmp.acfb;
        }
    }

    $(settings.foundClass+" img.p").click(function(){
        acfb.removeFind(this);
    });

    $(settings.inputClass,tmp).autocomplete(settings.urlLookup,settings.acOptions);
    i = 0;
    $(settings.inputClass,tmp).result(function(e,d,f){
        var f = settings.foundClass.replace(/\./,'');
        var img_path = $('#hiddenurl').val() +'images/';
        var split_array = d[0].split('_');
        var v = '<li class="'+f+'"><span> <input type="hidden" name="symptoms[]" value="'+split_array[1]+'">'+split_array[0]+'</span> <img class="p" src="'+img_path+'delete.gif"/></li>';
        var x = $(settings.inputClass,tmp).before(v);
        $('.p',x[0].previousSibling).click(function(){
            acfb.removeFind(this);
        });
        $(settings.inputClass,tmp).val('').focus();

    });
    $(settings.inputClass,tmp).focus();
    return acfb;
}




$(document).ready(function() {


                var acfb = $("ul.first").autoCompletefb({urlLookup:$('#hiddenurl').val() + 'index.php/Autocomplete/'});



                $("#show_value1" ).click(function(){alert(acfb.getData());});
                $("#clear_value1").click(function(){acfb.clearData();     });

                function acfbuild(cls,url){
                    var ix = $("input"+cls);
                    ix.addClass('acfb-input').wrap('<ul class="'+cls.replace(/\./,'')+' acfb-holder"></ul>');

                    return $("ul"+cls).autoCompletefb({urlLookup:$('#hiddenurl').val() + 'index.php/Autocomplete/'});
                }


            });

1 个答案:

答案 0 :(得分:1)

根据我的理解,您可以尝试减少“选项列表的宽度”,这会隐藏剩余的字符。

我有一个最有可能的例子(使用chosen.js),请在JSFiddle中查看并分享您的意见。