Populate results of semantic-ui search component with ajax

Question

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"

    }

    ]

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

Populate results of semantic-ui search component with ajax

Sign up