下拉菜单显示不正确

Posted 2023-05-08

【中文标题】下拉菜单显示不正确

【英文标题】：Dropdown isn't displaying properly

【发布时间】：2019-12-26 05:55:27

【问题描述】：

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

我有两个主要问题：

--- 默认情况下它呈现为正方形。正方形出现在下图中。

当您在下拉列表中键入一个字母时，您确实会看到数据，但一次只出现一个字母。 Here's a pic

数据集中的每个字母/字符都得到added to its own div（到属性）。

我不知道是我设置 Sumoselect 的方式有问题还是其他问题。

起初我只使用 jQuery Autocomplete 包。我不确定我是否应该将 Sumoselect 放在旁边，或者我是否只需要 Sumoselect 本身。

JS sn-p:

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>

【参考方案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>

【讨论】：

嗨@nidhin-joseph，我确实增加了下拉菜单的宽度，但个别字符的问题仍然存在。我注意到每个字符都被添加到自己的 div 中（我将在原始消息中添加图片），但我不知道为什么。

从屏幕截图中可以清楚地看出您没有使用 Sumoselect。 Sumo 的类名与屏幕截图中的类名不同。