songtianlun
80c2f9a1df
- Implement loading state in the search input with spinner. - Optimize the search request to handle pending requests and cancels. - Add dynamic response handling for Turbo frames to load search results. - Create a new partial for city search results. - Update the cities controller to support Turbo stream responses. These enhancements improve user experience during searches by showing a loading spinner and addressing potential issues with overlapping requests, ensuring that the application remains responsive and functional when fetching city search results.
52 lines
2.5 KiB
Plaintext
52 lines
2.5 KiB
Plaintext
<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> |