Question

我正在尝试为我拥有的下拉菜单实现一个名为Sumoselect的软件包。它提取了我可以在控制台中看到的数据。

我遇到两个主要问题：

下拉菜单显示不正确-默认情况下，它呈现为正方形。正方形出现在下面的图片中。
在下拉菜单中输入字母时，您可以执行查看数据，但是一次只显示一个字母。 Here's a pic
数据集中的每个字母/字符都在added to its own div（到属性）中。

我无法确定Sumoselect的设置方式是否有问题，或者还有其他问题。

起初，我只使用jQuery Autocomplete软件包。我不确定是否应该将Sumoselect放在旁边，还是仅需要Sumoselect。

JS代码段：

import "jquery-autocomplete/jquery.autocomplete.css";
import "sumoselect/sumoselect.css";
import "jquery";
import "jquery-autocomplete/jquery.autocomplete.js";
import "sumoselect/jquery.sumoselect.js";

// initialization async IIFE
(async function() {
  const dataObj = await dataObjProm;
  console.log( dataObj);

  const table = new Table("table", dataObj.getRawData()),
        chipSet = new ChipSet("departments-chip-set", dataObj.getDepartments()), // ------- this is where the data comes in

        searchHandler = initSearchHandler(chipSet, table);

    loadCombobox(dataObj.getDepartments());
    // doSumo(dataObj.getDepartments());

// more code


function loadCombobox(chipSet) {
    $('#combobox').autocomplete({
        source: chipSet // how the data enters jQuery Autocomplete -------- I didn't see where to do this in Sumoselect, so I thought I needed to use both
    }).on("click", function() {
        console.log('cs: ' + chipSet)
        console.log("combobox clicked")
    });
    doSumo(chipSet); // ----- not sure if this right here is correct
}

function doSumo(_target, chipSet) {
    if($(_target).html().length <= 0) {
        $(_target).append(chipSet.map(function(v){
            return "<option title='" + v + "'>" + v + "</option>";
        }).join(" "));
        $("#combobox").SumoSelect({
            okCancelInMulti: true,
            search: true,
            selectAll: true
        });

        $('.btnOk').on('click', function() {
            var obj = [],
                items = '';
            $('#combobox option:selected').each(function(i) {
                obj.push($(this).val());
            $('#combobox')[0].sumo.unSelectItem(i);
            });
            for(var i=0;i<obj.length;i++) {items += ' ' + obj[i]};
            alert(items);
        });
    }
}

html：

<select multiple="multiple" id="combobox" placeholder="Browse">
    </select>

Answer 1

之所以会这样，是因为父容器的宽度较小，并且下拉列表中的文本被应用word-break。

可能的解决方案是增加可用的父级宽度，以便即使工作中断也可以读取。请参见下面的示例，该示例具有较小的宽度和标准宽度。

$(document).ready(function() {
  $('.fixed-width select').SumoSelect();
  $('.normal-width select').SumoSelect();
});

.fixed-width {
  width: 50px;
}

.fixed-width .SumoSelect {
  width: 100%;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>

Fixed Width
<div class="fixed-width">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

<br><br> 

Normal Width
<div class="normal-width">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

下拉菜单显示不正确

JS代码段：

html：

1 个答案: