imekon imekon - 3 months ago 25
Javascript Question

Why does this fragment of semantic-ui search code only show seven items?

I'm working on an issue with Semantic-UI search and I'm getting a drop down with just seven items and I don't understand why:

<!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>


I get the search box, I get a dropdown but it's limited to just seven items - despite the fact that there are 13 items in my list, and I'm having trouble understanding why.

Also the items aren't showing any text, however that's not the issue of interest!

Answer

Change your code to look like this. this displays 10 results and should show the text of your data as well:

$('.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 */
});