Question

我在semantic ui应用中使用rails + angular，我有一个搜索下拉列表，当我输入字母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 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

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

使用您提供的相同代码设置稍微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应用程序也可能会以某种方式妨碍你。例如，如果模型字段上有观察者绑定到输入，则输入值可能会被更改，导致语义UI下拉列表行为不正常。

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

获得语义ui搜索下拉列表中的未定义值列表

1 个答案: