Question

我正在处理Semantic-UI搜索的问题，而我只用了七个项目就得到了一个下拉菜单，我不明白为什么：

<!DOCTYPE html>
<html>
<head>
    <title>Search in Semantic</title>

    <link rel="stylesheet" type="text/css" href="node_modules/semantic-ui/dist/semantic.min.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/semantic-ui/dist/semantic.min.js"></script>
</head>
<body>
<form class="ui form container">
<h3 class="ui dividing header">SEARCH FOR SHOWS</h3>
<div class="two fields">
    <div class="fourteen wide field">
        <div class="ui search">
            <div class="ui icon input">
                <input class="prompt" type="text" placeholder="Enter a series name">
                <i class="search icon"></i>
            </div>
            <div class="results"></div>
        </div>
    </div>
    <div class="two wide field">
        <button class="ui right floated right labeled icon green button">
            Add
            <i class="plus icon"></i>
        </button>
    </div>
    <div class="clearfix"></div>
</div>
</form>
<script type="text/javascript">
var content = [
{ title: 'An Idiot Abroad [A0001]' },
{ title: 'An Idiot Abroad [A0002]' },
{ title: 'An Idiot Abroad [A0003]' },
{ title: 'An Idiot Abroad [A0004]' },
{ title: 'An Idiot Abroad [A0005]' },
{ title: 'An Idiot Abroad [A0006]' },
{ title: 'An Idiot Abroad [A0007]' },
{ title: 'An Idiot Abroad [A0008]' },
{ title: 'An Idiot Abroad [A0009]' },
{ title: 'An Idiot Abroad [A0010]' },
{ title: 'An Idiot Abroad [A0011]' },
{ title: 'An Idiot Abroad [A0012]' },
{ title: 'An Idiot Abroad [A0013]' }
];

$('.ui.search').search({
    source: content,
    fields: {
        title: 'name'
    },
    minCharacters: 2
});
</script>
</body>
</html>

我收到了搜索框，我收到了一个下拉菜单，但它仅限于七个项目 - 尽管我的列表中有13个项目，而且我无法理解原因。

此外，这些项目并未显示任何文字，但这并不是您感兴趣的问题！

Answer 1

将您的代码更改为如下所示。这会显示10个结果，并且还应显示数据的文本：

$('.ui.search').search({
    source: content,
    fields: {
        title: 'title'  /*  You had the wrong key here */
    },
    minCharacters: 2,
    maxResults: 10  /*  This parameter overrides the default of 7 */
});

为什么语义ui搜索代码的这个片段只显示七个项目？

1 个答案: