下拉菜单显示不正确
Posted
技术标签:
【中文标题】下拉菜单显示不正确【英文标题】: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 的类名与屏幕截图中的类名不同。以上是关于下拉菜单显示不正确的主要内容,如果未能解决你的问题,请参考以下文章