<div class="mt-8 mb-2 max-w-2xl mx-auto"> <%= form_with url: cities_path, method: :get, class: "relative", data: { controller: "search", turbo_frame: "cities_results", turbo_action: "advance" } do |f| %> <div class="relative"> <!-- 搜索图标 --> <div class="absolute inset-y-0 left-0 flex items-center pl-4 z-10"> <svg class="w-5 h-5 text-base-content/70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> </div> <!-- 搜索输入框 --> <%= f.text_field :query, value: params[:query] ? URI.decode_www_form_component(params[:query]) : nil, class: "w-full pl-12 pr-12 py-3 rounded-full bg-base-200/80 backdrop-blur border border-base-300 focus:outline-none focus:ring-2 focus:ring-primary/50 transition", placeholder: "Search cities...", autocomplete: "off", data: { action: "input->search#submit", search_target: "input" } %> <!-- 右侧按钮区域(清除按钮或加载动画) --> <!-- 更简单的环形 loading 图标版本 --> <div class="absolute inset-y-0 right-0 flex items-center pr-4 z-10" data-search-target="statusIcon"> <% if params[:query].present? %> <%= link_to cities_path, class: "text-base-content/50 hover:text-base-content transition", data: { search_target: "clearButton" } do %> <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> <% end %> <% end %> <!-- 简单的环形 loading --> <div class="hidden" data-search-target="spinner"> <div class="w-5 h-5 border-2 border-base-content/20 border-t-base-content/70 rounded-full animate-spin"></div> </div> </div> </div> <%= f.hidden_field :region, value: params[:region] if params[:region] %> <%= f.hidden_field :country, value: params[:country] if params[:country] %> <% end %> </div>