javascript - 在语义 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}',
    },
});

rails Controller Action :

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

您选择的正则表达式设置与默认设置相同，因此添加/删除这些行不会导致行为发生任何变化。

设置略simpler example in 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 正在响应语义 UI 无法以有意义的方式处理的数据。

或者，也有可能是您的 Angular 应用程序以某种方式妨碍了它。例如，如果绑定(bind)到输入的模型字段上有观察者，则输入值可能会被更改并导致语义 UI 下拉菜单出现异常。

我会暂时从输入中删除 ng-model 指令属性，以便首先让下拉搜索正常工作。然后重新添加模型绑定(bind)并从那里继续调试您的 NG 应用。