在语义UI搜索下拉列表中获得未定义值

got list of undefined values in semantic ui search dropdown

本文关键字：未定义 下拉列表 语义 UI 搜索      更新时间：2023-09-26

我在我的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控制器动作:

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>

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

在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应用。

相关文章：