2017-07-17 120 views
0

美好的一天,我想用這個json數據來使用語義ui的自動完成功能。任何想法請。下面是我在不同網站看到的代碼。語義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> 
+0

您面臨的問題是什麼? – Thamaraiselvam

+0

當我輸入我的文本框時沒有結果。 – Lara

+0

控制檯中的任何錯誤? – Thamaraiselvam

回答

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>