Question

如标题所示，在从服务器检索json数据后，无法成功填充语义ui搜索组件。我一直在努力去理解文档，这真的很糟糕，我找不到任何东西在网上寻找解决方法所以我写下我到目前为止写的内容，感谢您抽出宝贵的时间。

这与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>

这是js脚本

    $("#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
                    });
              });
     });

以下是我服务器的响应

    {  
    "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 1

您的问题在这一行：

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

根据您服务器的回复，将其更改为：

$.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>

使用ajax填充semantic-ui搜索组件的结果

1 个答案: