Manfredi6 Manfredi6 - 3 years ago 144
Ajax Question

Populate results of semantic-ui search component with ajax

as written on the title i can't succeed populating the semantic-ui search component after retrieving a json data from my server. I've been struggling trying to understand the documentation, which is really really poor, i couldn't find anything at all looking for a workaround on the net
So i'm writing down what i've written so far, thanks for your time in advice.

This is what regards index.jsp

<div class="ui search">
<div class="ui icon input">
<input id="searchFollowee" class="prompt" type="text" placeholder="Search followed people..">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>


Here is the js script

$("#searchFollowee").on('keyup', function(e) {
$.post("jsp/doFetchFollowee.jsp",{"username":"Manfredi","followee":$(this).val()}, function( data )
{
var content=[];
$.each( data, function(index,element)
{
content.push(element.username);
});
//fill search form
$('.ui.search').search({
source : content,
searchFields : [
'username'
],
searchFullText: false
});
});
});


Here is the response of my server

{
"success":"true",
"results":[
{
"firstname":"NomeTest1",
"user_id":2,
"surname":"CognomeTest1",
"profile_picture":"semantic/themes/default/assets/images/avatar/large/profile.png",
"username":"Test1"
},
{
"firstname":"NomeTest3",
"user_id":4,
"surname":"CognomeTest3",
"profile_picture":"semantic/themes/default/assets/images/avatar/large/profile.png",
"username":"Test3"
}
]
}

Answer Source

Your issue is in this line:

$.each( data, function(index,element)

According to your server's response, change it to:

$.each( data.results, function(index,element)

var content=[];
var data = {
    "success":"true",
    "results":[
        {
            "firstname":"NomeTest1",
            "user_id":2,
            "surname":"CognomeTest1",
            "profile_picture":"semantic/themes/default/assets/images/avatar/large/profile.png",
            "username":"Test1"
        },
        {
            "firstname":"NomeTest3",
            "user_id":4,
            "surname":"CognomeTest3",
            "profile_picture":"semantic/themes/default/assets/images/avatar/large/profile.png",
            "username":"Test3"
        }
    ]
};
$.each( data.results, function(index,element)
{
    content.push({title: element.username});
});

//fill search form
$('.ui.search').search({
    source : content,
    searchFields   : [
        'title'
    ],
    searchFullText: false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/search.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/search.js"></script>


<div class="ui search">
    <div class="ui icon input">
        <input id="searchFollowee" class="prompt" type="text" placeholder="Search followed people..">
        <i class="search icon"></i>
    </div>
    <div class="results"></div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download