Got a list of undefined values ​​in the semantic search combo ui

Question

I use semantic uiin my application rails + angular, and I have a drop-down list, and when I type a letter s, I get a list of values undefinedin my drop-down list and for other single letters everything works fine. Interestingly, the request to the server does not arrive when I type the letter s. I can not understand the reason for this. Below is my code, please help.

Javascript code:

$('.ui.product.search').dropdown({
    fullTextSearch: true,
    preserveHTML: false,
    debug: true,
    saveRemoteData: false,
    sortSelect: true,
    match: 'text',
    regExp: {
        escape: /[-[\]{}()*+?.,\\^$|#\s]/g,
    },
    apiSettings: {
        url: '/gpr/v1/product_codes/search?name={query}',
    },
});

Rails controller actions:

def search
  # byebug
  search_query = ""
  if not params[:name].blank?
    search_query = "%#{params[:name]}%"
  end
  @product_codes = ProductCode.where("H3Description LIKE ?", search_query)
  #render json: {results: @product_codes }
end

HTML code:

<div class="two fields">
    <div class="field">
        <label><%= t 'asset.create.h3' %></label>
        <select name="products" class="ui product search dropdown" ng-model="asset_details[0].type_details[$index].crop">
        </select>
    </div>

Answer 1

, , / .

Codepen , , , "s" API :

$(function() {
    $('.ui.product.search').dropdown({
    fullTextSearch: true,
    preserveHTML: false,
    debug: true,
    saveRemoteData: false,
    sortSelect: true,
    match: 'text',
    regExp: {
        escape: /[-[\]{}()*+?.,\\^$|#\s]/g,
    },
    apiSettings: {
        url: '/gpr/v1/product_codes/search?name={query}',
    },
 });
});

, undefined, , API , .

, Angular - . , , , .

ng-model , . NG .