セマンティックui検索ドロップダウンで定義されていない値のリストを取得

Question

私はrails + angularのアプリケーションでsemantic uiを使用しています。検索ドロップダウンがあり、入力したときにはsと入力してドロップダウンリストにundefined一文字はうまくいきます。 興味深いのは、私が西暦sという文字を入力すると、サーバーへのリクエストがないということです。その理由を理解できません。以下は私のコードです、助けてください。

javascriptのコード：

$('.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}', 
    }, 
}); 

レールのコントローラのアクション

：

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コード：

<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

あなたの選ばれた正規表現の設定がデフォルトと同じなので、追加/削除これらの行は動作の変更を引き起こすべきではありません。あなたは、単一の「S」の文字は、検索APIに介して送信されることを示していて、同じコードを使って少しsimpler example in Codepen設定

：

$(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はセマンティックUIが有意義な方法で処理できないデータで応答しています。

また、Angularアプリケーションが何とか途中で途切れることもあります。たとえば、入力にバインドされているモデルフィールドにウォッチャーがある場合、入力値が変更され、セマンティックUIのドロップダウンが誤動作する可能性があります。

入力からng-model指示属性を一時的に削除して、最初にドロップダウン検索が正しく機能するようにします。その後、モデルバインディングを再度追加して、そこからNGアプリケーションをデバッグします。