Question

我试图在Rails 3.2中为字段实现具有特殊行为的自动补全。我正在使用rails自动补全gem，我想做的是：

表单中有一个字段，我希望自动补全功能能够处理该字段，其中包含食谱成分的数量和数量类型。输入的三个不同示例：

100 gramms
2 pices
3.2 kilos

我希望当用户按下列表中所有可用选项的空格时，该行为具有下拉菜单。当用户输入另一个键时，列表当然会根据该输入进行过滤。

是否可以为上述行为自定义轨道自动补全功能？

Answer 1

更新。我最初的回答误解了这个问题。

第一种选择。

您可以修改控制器操作。

# units_controller
def autocomplete
   term = params[:term]
   quantity, unit = term.split(/s/)
   items = unit ? Unit.where( units.name LIKE ? ,"#{unit}%") : []
   json = items.collect do |item| 
     { "id" => item.id.to_s, 
       "label" => item.name, 
       "value" => "#{quantity} #{item.name} "  
     }
   end
   render json: json
end

虽然自动补全行为已经是正确的，但这个解决方案不是最优的，因为即使在我键入数量时，它也会撞击服务器（并且没有结果）。

A complete solution involves patching the rails autocompleter driver. Keep the abaove custom controller action and just put a custom minLength function https://github.com/crowdint/rails3-jquery-autocomplete/blob/master/lib/assets/javascripts/autocomplete-rails-uncompressed.js#L63

您可以将此部分修改为：

   search: function() {
     // custom minLength
     var term = extractLast( this.value );
     var filter = jQuery(this).attr( data-input-filter );
     if (filter != null) { 
        var re = new RegExp(filter,"");
        term = term.replace(re, "$1"); //ignore parts of it
     }
     if ( term.length < 1 ) { //modify to 1
       return false;
     }
   },

现在，如果你把这个最小长度过滤器放在你的字段标签上

 data-input-filter  => j("^.*s+([^s]+)$")

它将正确地忽略用户输入的第一位（直到最后一个空格之后），只有当你到达单元的第一个字符时，它才会到达服务器。（不太确定是否会在这里逃脱）

这种方法的一个优点是，您可以将成分自动补全添加到控制器中，并使用逗号，只需将此选项添加到自动补全文本字段帮助器中即可获得多个成分输入：

"data-delimiter" =>  ,

然后，您可以正确地自动完成以下输入：

1 kilo flour, 2 spoons sugar, 100 gramms yeast.

Answer 2

还有一个纯js解决方案，所以你可以在控制器中保持简单

# units controller
autocomplete :unit, :name

您需要修改rails3jquery自动补全js驱动程序。

One crucial line is this. https://github.com/crowdint/rails3-jquery-autocomplete/blob/master/lib/assets/javascripts/autocomplete-rails-uncompressed.js#L45 you could customize here how user input relates to actual term sent to server for completion.

问题是，您还必须确保在选择中插入的值包含数量。由于此值取自服务器的json响应，如果不将数量发送到服务器，则必须在提取时将其存储在js属性中

function extractLast( term ) {
  var last = split( term ).pop().replace(/^s+/,"");
  var arr = last.split(/s+/);
  if (arr.length > 1) {  
     var res = arr.pop();
     jQuery(this).attr( data-quantity ).val(arr.join(   ));
  }
  return res;
}

and insert it on line https://github.com/crowdint/rails3-jquery-autocomplete/blob/master/lib/assets/javascripts/autocomplete-rails-uncompressed.js#L77

terms.push( (jQuery(this).attr( data-quantity )) +     + ui.item.value );

当然，更好的代码会使这依赖于输入字段数据属性，就像我接受的答案一样。

此解决方案也不允许根据数量解析成分或过滤单位，因为只有单位部分会随请求一起发送。

友情链接