语义Ui自动完成

时间:2017-07-17 06:36:01

标签: php mysql semantic-ui

美好的一天我想使用这个json数据来使用语义ui的自动完成。任何想法,请。下面是我在不同网站上看到的代码。

record.json

{
 records: [
      {
        idno: "PH00019404-1",
        firstname: "CHERRY MAE"
      },
      {
        idno: "PH00008381-2",
        firstname: "LUZMIN"
      }
 ]
}

我的Html

<div class="ui search focus">
    <div class="ui search icon input">
        <input class="ui search" type="text" placeholder="Colors..." autocomplete="off">
        <i class="search icon"></i>
    </div>
    <div class="results"></div>
</div>

我的Javascript

<script type="text/javascript">
 $(document).ready(function () {
  $('.ui.search').search({
    apiSettings: {
        url: 'www.mysite.com/record.json',
        minCharacters : 3,
        onResponse: function(results) {    
            var response = {
                results : []
            };    
            $.each(results, function(index, item) {              
                response.results.push({
                    title       : item.idno,
                    description : item.firstname
                    //url       : item.html_url
                });
            });    
            return response;
        },
    },
  });
});
</script>

1 个答案:

答案 0 :(得分:0)

我得到了这个链接的答案。 https://semantic-ui.com/modules/search.html#/examples

<script>
 $('.ui.search')
  .search({
   apiSettings: {
   url: 'http://localhost/views/api/members?q={query}'
  },
  fields: {
  results : 'records',
  description   : 'name',
  title : 'idno'
},
minCharacters : 3
})
;
</script>