lzwme / bootstrap-suggest-plugin Goto Github PK

@renxia
经分析确认在隐藏的情况下，$input.next('.input-group-btn').width()会出现为1的情况。
建议处理方法改为：
return $iClear.css({
position: 'absolute',
top: 12,
right: options.showBtn ? ($input.next('.input-group-btn').width()==1?33:($input.next('.input-group-btn').width() || 33)) + 2 : 12,
zIndex: 4,
cursor: 'pointer',
fontSize: 12
}).hide();
或
return $iClear.css({
position: 'absolute',
top: 12,
right: options.showBtn ? Math.max(($input.next('.input-group-btn').width() || 33),33)+ 2 : 12,
zIndex: 4,
cursor: 'pointer',
fontSize: 12
}).hide();

这个插件挺好用的，只是在输入中文的时候没有填入到输入框也会触发搜索，这样很浪费，碰到数据量大的时候会有点慢。是不是选项可以设置，没有查到？

这样设置参数，json连接后面跟一个参数t，挂时间戳，防止每次get请求取到重复数据。
url: "/xx.json?t=" + (new Date()).getTime()

但是最终请求的url，为啥最后面多了一个&？
http://localhost/xx.json?t=1468554911659&

如题

hi
我在IE 11下发现demo中的例子：
测试(首次从 URL 获取数据)
测试(首次从 URL 获取数据，不显示按钮)
中的下拉滚动条无法点中

url: "/rest/sys/getuserlist?area='+area+'keyword="，我发现area永远是初始值，这个有办法解决吗？

Cannot read property 'slice' of undefined

将[].prototype.slice.call(arguments, 1)
改为
Array.prototype.slice.call(arguments, 1)
可以解决。

当仅仅是点击一下搜索框，聚焦后就立刻再次发送ajax请求。能否当搜索框内容发生变化的时候才会发送请求

请问配置getDataMethod：firstByUrl 时，如何实现精确查找而不是包含和包含于搜索字段查询，还是说只能配置成url，然后每次从后台获取值？谢谢!

首先很感谢这个贵工作室编写的这个插件

现在我在使用中遇到一个问题,就是我的插件配置好了以后,是可以正常出来数据了,但是我如果后台有数据更新,我要怎么在不刷新页面的情况下获取到新的后台数据呢?

processData: function (json) {
var i, len, data = {value: []};
if (!json || !json.u || json.u.length === 0) {
return false;
}
console.log(json);
len = json.u.length;

             jsonStr = "{'value':[";
             for (i = 0; i < len; i++) 
             {
                 data.value.push({
                     "NAME": json.u[i].NAME,
                     "PHONE":json.u[i].PHONE,
                     "SEX": json.u[i].SEX,
                 });
             } 
             return data;
        }
    }).on('onSetSelectValue', function (e, keyword) { 
         console.log(keyword.PHONE);//获取不到数据sex和phone
        console.log('onSetSelectValue: ', keyword);
    });

var unitData = {value:[{unit_name: "经济发展局", unit_no: "410940900001"},{unit_name: "经济发展局", unit_no: "410940900002"}]}
$(document).ready(function(){
var bsSuggest = $("#selectUnit").bsSuggest({
data: unitData, //提示所用的数据，注意格式
idField: 'unit_no', //每组数据的哪个字段作为 data-id，优先级高于 indexId 设置（推荐）
keyField: 'unit_name', //每组数据的哪个字段作为输入框内容，优先级高于 indexKey 设置（推荐）
/* 搜索相关 /
autoSelect: true, //键盘向上/下方向键时，是否自动选择值
allowNoKeyword: true, //是否允许无关键字时请求数据
getDataMethod: 'firstByUrl', //获取数据的方式，url：一直从url请求；data：从 options.data 获取；firstByUrl：第一次从Url获取全部数据，之后从options.data获取
ignorecase: true, //前端搜索匹配时，是否忽略大小写
effectiveFieldsAlias: {unit_no:"单位编号",unit_name: "单位名称"}, //有效字段的别名对象，用于 header 的显示
delay: 300, //搜索触发的延时时间间隔，单位毫秒
showHeader: false, //是否显示选择列表的 header。为 true 时，有效字段大于一列则显示表头
showBtn: false, //是否显示下拉按钮
clearable: false, // 是否可清除已输入的内容
}).on('onDataRequestSuccess', function (e, result) {
console.log('onDataRequestSuccess: ', result);
}).on('onSetSelectValue', function (e, keyword, data) {
console.log('onSetSelectValue: ', keyword,keyword.id,keyword.key, data);
$("#unit_no").val(keyword.id);
}).on('onUnsetSelectValue', function () {
console.log("onUnsetSelectValue");
$("#unit_no").val('');
});
});
function getUnit(regionid){
$.ajax({
async:false,
type:'POST',
url: '${path}/verifylog/getUnitList.do?regionid='+regionid+'',
error:function(){
},
success:function(json){
console.log(eval("("+json+")"));
unitData = eval("("+json+")");
}
});
console.log(unitData);
var bsSuggestFlag = $("#selectUnit").bsSuggest({
data: unitData, //提示所用的数据，注意格式
idField: 'unit_no', //每组数据的哪个字段作为 data-id，优先级高于 indexId 设置（推荐）
keyField: 'unit_name', //每组数据的哪个字段作为输入框内容，优先级高于 indexKey 设置（推荐）
/ 搜索相关 */
autoSelect: true, //键盘向上/下方向键时，是否自动选择值
allowNoKeyword: true, //是否允许无关键字时请求数据
getDataMethod: 'firstByUrl', //获取数据的方式，url：一直从url请求；data：从 options.data 获取；firstByUrl：第一次从Url获取全部数据，之后从options.data获取
ignorecase: true, //前端搜索匹配时，是否忽略大小写
effectiveFieldsAlias: {unit_no:"单位编号",unit_name: "单位名称"}, //有效字段的别名对象，用于 header 的显示
delay: 300, //搜索触发的延时时间间隔，单位毫秒
showHeader: false, //是否显示选择列表的 header。为 true 时，有效字段大于一列则显示表头
showBtn: false, //是否显示下拉按钮
clearable: false, // 是否可清除已输入的内容
}).on('onDataRequestSuccess', function (e, result) {
console.log('onDataRequestSuccess: ', result);
}).on('onSetSelectValue', function (e, keyword, data) {
console.log('onSetSelectValue: ', keyword,keyword.id,keyword.key, data);
$("#unit_no").val(keyword.id);
}).on('onUnsetSelectValue', function () {
console.log("onUnsetSelectValue");
$("#unit_no").val('');
});
}
getUnit想重新初始化data的值，但是好像还是用的一开始初始化的数据

Hi，可否下拉方向自动判断呢，就跟select 那样，默认下方，当下方空间不足的时候，在上方显示

You can use the ajax.processResults option to transform the data returned by your API into the format expected by Select2:

$('#mySelect2').select2({
ajax: {
url: '/example/api',
processResults: function (data) {
// Tranforms the top-level key of the response object from 'items' to 'results'
return {
results: data.items
};
}
}
});
这样我可以不用修改后端的代码，提高兼容性。仅供参考。

Hi：
我设置了"overflow": "auto" ，当我的suggest内容大于下拉菜单最大长度时，右侧出现滚动条，但是滚动条无法用鼠标点中拖动。

这是在bootstrap的模态框内向input添加了suggest。

// url 调整
ajaxParam.url = function() {
if (!keyword || ajaxParam.data) {
return ajaxParam.url || options.url;
}

        var type = '?';
        if (/=$/.test(options.url)) {
            type = '';
        } else if (/\?/.test(options.url)) {
            type = '&';
        }

        return options.url + type + keyword; // return options.url + type + encodeURI(keyword);
    }();

毕竟当加载大量数据会比较慢，要考虑到分页加载，但这样也会有一个问题，就是当作为编辑页面控件出现的时候，数据还没有加载(但初始化值data_id已经给定又不再第一页，需要触发一次查询才能知道对应的显示名称时)要怎么处理呢

貌似请求url时在文本输入变化的时候触发，可不可以添加获取焦点的时候也触发网络请求？？？

怎么从数据库中按照搜索关键词去数据库中取数据 开始只加载少量数据 10条

<select class="form-control" id="cooperativeType">' '<option value="-1">请选择</option>' '<option value="1">我方付款</option>' '<option value="2">对方付款</option>' '</select>
通过$("#cooperativeType").val(2) 就能显示为对方付款,bootstrap-suggest-plugin里该怎么做?

如果通过ajax返回的json数据格式与插件要求的不一样。可以同过fnProcessData方法进行设置。
但是我发现个问题，设置好后，在UI上，点击最右侧的按钮可以正常使用，而直接在输入框里点击，会报错说数据格式不正确，我的理解是右侧的按钮使用了fnProcessData重新梳理过的数据。而文本框直接点击，没有使用fnProcessData处理过的数据。

hi,使用的时候发现这个错误, bootstrap-suggest.js 已引入

类似select功能的setVal方法，给suggest赋值，并能触发相应的事件。
我现在这么写的$(#input).val("124").trigger("onSetSelectValue"); 触发不了事件

steps:

1. select a valid data from the url request
2. remove the data by the backspace key one by one quickly

issue:
the element attribute still have the data-id with the previous value ,like this below:

input type="text" placeholder="请选择" class="form-control" id="creator" autocomplete="off" alt="test4" data-id="6" style="background: rgb(255, 255, 255);"

如果想跟后台进行交互交互，后台的返回的数据格式应该是怎么样的？

碰到个这样的需求：
需要在选中的时候获取非idField的值，并在列表隐藏时执行一些代码，但是我写的（代码后面贴出）会在鼠标移动到列表的时候就触发blur事件，导致多次执行blur()

        $("#formModal #Specification").bsSuggest({
                showHeader: true,
                autoDropup: true,
                clearable: true,               // 是否可清除已输入的内容
                emptyTip: '未检索到匹配的数据',
                effectiveFieldsAlias: { Id: "主键", Name: "名称", Price: "价格"},
                effectiveFields: ["Name","Price"],//显示的字段
                getDataMethod: "url",
                url: "@Url.Action("GetListWithPager", "Specification")",
                fnAdjustAjaxParam: function (keyword, opts) {//自定义请求参数
                    return {
                        data: {
                            keywords: keyword,
                            page: 1,
                            rows: 10,
                            sidx: "Name",
                            sord: "asc"
                        }
                    }
                },
                fnProcessData: function (data) {
                    return {
                        value: data.rows
                    };
                },
                idField: "Id",
                keyField: "Name"
        }).on('onSetSelectValue', function (e, data) {
            $("#SpecificationId").val(data.id)
            $("#Price").val(data.Price)
        }).on('onUnsetSelectValue', function(e) {
            $("#SpecificationId").val("")
            $("#Price").val
            if ($(this).val().length>0)
                $(this).on("blur", addSpecification)
        });

具体我还没有看过，是不是js里面有冲突？

你好，有个问题。使用URL方式请求json数据，并且前台页面已经可以成功解析展示下拉列表，但是为什么没有触发dataRequestSuccess中的方法？

不是一个标准的 bootstrap 下拉式菜单或已初始化:
Object { 0: input#search2, context: input#search2, length: 1 }
bootstrap-suggest.js:713:21

What does it mean?

你好，有这样一个问题：

什么都不填入，会展示所有内容

如果选择”全部”，并再次点击下拉按钮，则只能展示出“全部”这个选项。但实际上我是需要选择其他选项，但是却看不到，我需要手动删除input中的内容才可重新看到所有内容。

在0.1.2的版本中，是没有以上问题的，点击下拉可以看到全部内容的。
请问这是bug还是功能上的修改？

回车键后立刻在末尾输入内容不清空data-id

观察到js的第328行是一段for循环遍历json的数据, 并没有按effectiveFields或者effectiveFieldsAlias的顺序显示数据。

// 生成表头
html.push('<thead><tr>');
for (j in dataList[0]) { // 328行
    if (!inEffectiveFields(j, options)) {
        continue;
    }

    html.push('<th>', (options.effectiveFieldsAlias[j] || j),
        index === 0 ? ('(' + len + ')') : '' , // 表头第一列记录总数
        '</th>');

    index++;
}
html.push('</tr></thead>');

后台是hash存储的json键值对, 顺序是不固定的。有时会希望重要的数据排前面一点。

js中blur事件中下加下面代码

var warnbg = options.inputWarnColor || 'rgba(255,255,0,0.1)';
var inputbg = $input.css('background-color').replace(/ /g, '').split(',', 3).join(',');
if (options.clearable && ~warnbg.indexOf(inputbg)) $iClear.click();

添加一个参数，设置关键字左匹配，右匹配，或全文匹配，目前的模式是全文匹配

数据过多时，能否支持分页

keyup input paste事件对空进行处理，并return掉？！！

同#38提出的问题。。。。
在ie11下，插件版本为2014-10-09的版本，点击文本框，下拉菜单出现，不填写任何内容，鼠标移至下拉菜单上，文本框失去焦点，当鼠标离开下拉菜单，会自动触发文本框focus事件，此时鼠标单击，此时应该触发了blur事件，然后隐藏下拉菜单。在谷歌下没问题，但是在ie11下，会在文本框blur之前触发input事件，导致应该隐藏的下拉菜单又重新出现了。
跟踪日志：mouseleave ->input focus-> input blur->input keyup event.type=input
我的解决办法：在隐藏列表的同时,注销keyupTimer延时事件
if (!isMouseenterMenu) { // 不是进入下拉列表状态，则隐藏列表
$dropdownMenu.css('display', '');
if(keyupTimer) clearTimeout(keyupTimer);
}

你好：
有两个问题需要请教，感谢在百忙之中查看问题，谢谢。

问题1：现在需要实现对选中菜单的记忆，我如何才能让此控件选中我指定的项？
目前来说为了看上去像有记忆功能，我只是把名称传过来进行的赋值，像这样：$("#suggest-input").val("菜单一"); 这样看上去我对之前选中“菜单一”有了记忆功能，但是实际并没有触发suggest控件的选择菜单的事件，如何实现选中某项并触发选中事件？好像没有找到对应的方法实现此功能？

问题2：加载suggest控件时，是不会选中任何下拉项目的，那么如何让控件在加载时默认选中第一项？

不是一个标准的 bootstrap 下拉式菜单:

请问怎么样设置用POST还是GET方式请求后台呢？

当前的业务需求
1.用户输入的关键字 indexOf 维护的字典内，才能过滤出
2.反之不需要过滤出(维护的字典内 indexOf 用户输入的关键字，才能过滤出)

方案一：
// return value &&
// (inEffectiveFields(key, options) || inSearchFields(key, options)) &&
// (value.indexOf(keyword) !== -1 || keyword.indexOf(value) !== -1);
return value &&
(inEffectiveFields(key, options) || inSearchFields(key, options)) &&
(value.indexOf(keyword) !== -1);

方案二：
是否可以增加配置，让用户选择

I am using bs-suggest plugin in update form so while editing how to set value to suggest

当设置了这个参数effectiveFields的时候，再设置showBtn: false。貌似头还是会显示？

你好，请问这个问题如何解决：
一、单击input，选中第一项

二、再单击input，下拉列表中会自动新增最后一列index的值

看您的demo页面就不会这样，是什么问题呢

重写了ajax方法，扩展对异步请求session超时的重定向处理
页面上引用重写之后，bootstrap-suggest.min.js就出现问题了
TypeError: a.ajax(...) is undefined

data-id不正确

你好，在firefox下，输入框输入内容后，无法实时更新下拉框的建议，需要将鼠标点击其他地方，然后再点击输入框使之重新获取焦点时，才会生效。firefox版本：45.0.1。看一下哈

            //列表中滑动时，输入框失去焦点
            $dropdownMenu.on('mouseenter', function () {
                //console.log('mouseenter')
                mouseenterDropdownMenu = 1;
                //$input.blur();

这个blur() 地方的问题