{"id":107598,"date":"2025-11-04T09:49:41","date_gmt":"2025-11-04T09:49:41","guid":{"rendered":"https:\/\/www.bldcpump.com\/?page_id=107598"},"modified":"2025-11-04T11:03:05","modified_gmt":"2025-11-04T11:03:05","slug":"pump-selector","status":"publish","type":"page","link":"https:\/\/www.bldcpump.com\/es\/pump-selector\/","title":{"rendered":"Pump Selector"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"107598\" class=\"elementor elementor-107598\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a1fb7d0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a1fb7d0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-587186f\" data-id=\"587186f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fa33de6 elementor-widget elementor-widget-html\" data-id=\"fa33de6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* \u4f7f\u7528\u66f4\u9ad8\u7684\u4f18\u5148\u7ea7\u6765\u8986\u76d6\u5168\u5c40\u6837\u5f0f *\/\n  \n  \/* \u5feb\u901f\u641c\u7d22\u533a\u57df\u6837\u5f0f - \u589e\u5f3a\u4f18\u5148\u7ea7 *\/\n  .pump-selector-container .quick-search-section {\n    background: linear-gradient(135deg, #007cba 0%, #005f9a 100%) !important;\n    border-radius: 12px !important;\n    padding: 32px !important;\n    margin-bottom: 32px !important;\n    box-shadow: 0 4px 16px rgba(0, 124, 186, 0.15) !important;\n  }\n  \n  .pump-selector-container .quick-search-header {\n    color: white !important;\n    margin-bottom: 20px !important;\n  }\n  \n  .pump-selector-container .quick-search-header h3 {\n    font-size: 18px !important;\n    font-weight: 600 !important;\n    margin: 0 0 8px 0 !important;\n    letter-spacing: -0.2px !important;\n    color: #ffffff !important; \/* \u660e\u786e\u8bbe\u7f6e\u4e3a\u767d\u8272 *\/\n  }\n  \n  .pump-selector-container .quick-search-header p {\n    font-size: 14px !important;\n    margin: 0 !important;\n    opacity: 0.9 !important;\n    color: #ffffff !important; \/* \u660e\u786e\u8bbe\u7f6e\u4e3a\u767d\u8272 *\/\n  }\n  \n  \/* \u641c\u7d22\u6846\u5bb9\u5668 *\/\n  .pump-selector-container .model-search-container {\n    position: relative;\n    max-width: 600px;\n  }\n  \n  .pump-selector-container .model-search-input {\n    width: 100% !important;\n    padding: 14px 48px 14px 18px !important;\n    font-size: 16px !important;\n    border: none !important;\n    border-radius: 8px !important;\n    background: white !important;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;\n    transition: all 0.3s ease !important;\n  }\n  \n  .pump-selector-container .model-search-input:focus {\n    outline: none !important;\n    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;\n  }\n  \n  .pump-selector-container .model-search-input::placeholder {\n    color: #a0aec0 !important;\n  }\n  \n  \/* \u641c\u7d22\u56fe\u6807 *\/\n  .pump-selector-container .search-icon {\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    height: 20px;\n    opacity: 0.5;\n    pointer-events: none;\n  }\n  \n  \/* \u81ea\u52a8\u5b8c\u6210\u4e0b\u62c9\u6846 *\/\n  .pump-selector-container .autocomplete-dropdown {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    margin-top: 4px;\n    background: white !important;\n    border-radius: 8px !important;\n    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;\n    max-height: 400px;\n    overflow-y: auto;\n    z-index: 1000;\n    display: none;\n  }\n  \n  .pump-selector-container .autocomplete-dropdown.show {\n    display: block;\n  }\n  \n  .pump-selector-container .autocomplete-item {\n    padding: 12px 16px !important;\n    border-bottom: 1px solid #f0f0f0 !important;\n    cursor: pointer !important;\n    transition: background-color 0.2s ease !important;\n  }\n  \n  .pump-selector-container .autocomplete-item:last-child {\n    border-bottom: none !important;\n  }\n  \n  .pump-selector-container .autocomplete-item:hover,\n  .pump-selector-container .autocomplete-item.selected {\n    background-color: #f7f9fb !important;\n  }\n  \n  .pump-selector-container .autocomplete-item-title {\n    font-size: 15px !important;\n    font-weight: 600 !important;\n    color: #1a1a1a !important;\n    margin-bottom: 4px !important;\n  }\n  \n  .pump-selector-container .autocomplete-item-title mark {\n    background-color: #fef3c7 !important;\n    color: inherit !important;\n    padding: 0 2px !important;\n    border-radius: 2px !important;\n  }\n  \n  .pump-selector-container .autocomplete-item-details {\n    font-size: 13px !important;\n    color: #718096 !important;\n    line-height: 1.4 !important;\n  }\n  \n  .pump-selector-container .autocomplete-item-details span {\n    margin-right: 12px !important;\n    white-space: nowrap;\n  }\n  \n  .pump-selector-container .no-results {\n    padding: 20px !important;\n    text-align: center !important;\n    color: #718096 !important;\n    font-size: 14px !important;\n  }\n  \n  \/* \u4f18\u5316\u5206\u9694\u7ebf\u6837\u5f0f *\/\n  .pump-selector-container .section-divider {\n    text-align: center !important;\n    margin: 36px 0 !important;\n    position: relative;\n  }\n  \n  .pump-selector-container .section-divider::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 0;\n    right: 0;\n    height: 2px;\n    background: linear-gradient(90deg, transparent, #007cba 20%, #007cba 80%, transparent) !important;\n  }\n  \n  .pump-selector-container .section-divider span {\n    position: relative;\n    background: white !important;\n    padding: 8px 24px !important;\n    color: #007cba !important;\n    font-size: 15px !important;\n    text-transform: uppercase !important;\n    letter-spacing: 0.8px !important;\n    font-weight: 600 !important;\n    border: 2px solid #007cba !important;\n    border-radius: 20px !important;\n    display: inline-block;\n  }\n  \n  \/* \u8868\u5355\u6807\u7b7e\u4f18\u5316 *\/\n  .pump-selector-container .form-group label { \n    display: block !important; \n    font-weight: 500 !important;\n    font-size: 14px !important;\n    margin-bottom: 8px !important; \n    color: #4a5568 !important;\n    text-transform: uppercase !important;\n    letter-spacing: 0.3px !important;\n  }\n  \n  .pump-selector-container .form-group label .label-hint {\n    font-size: 12px !important;\n    color: #718096 !important;\n    text-transform: none !important;\n    letter-spacing: normal !important;\n    display: block !important;\n    margin-top: 2px !important;\n    font-weight: 400 !important;\n  }\n\n  \/* \u5bb9\u5668\u6837\u5f0f *\/\n  .pump-selector-container { \n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif !important; \n    line-height: 1.6 !important; \n    max-width: 1200px !important; \n    margin: 60px auto 40px auto !important;\n    padding: 0 20px !important;\n  }\n  \n  \/* \u6807\u9898\u533a\u57df - \u589e\u5f3a\u4f18\u5148\u7ea7 *\/\n  .pump-selector-container .selector-intro { \n    text-align: center !important;\n    margin-bottom: 40px !important;\n  }\n  \n  .pump-selector-container .selector-intro h2 { \n    font-size: 32px !important; \n    font-weight: 600 !important;\n    color: #1a1a1a !important; \n    margin-bottom: 12px !important;\n    letter-spacing: -0.5px !important;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif !important;\n  }\n  \n  .pump-selector-container .selector-intro p { \n    font-size: 15px !important; \n    color: #666 !important;\n    max-width: 700px !important;\n    margin: 0 auto !important;\n    line-height: 1.7 !important;\n  }\n  \n  \/* \u8868\u5355\u6837\u5f0f *\/\n  .pump-selector-container .pump-selector-form { \n    background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%) !important;\n    border: 1px solid #e1e8ed !important;\n    padding: 32px !important; \n    border-radius: 12px !important; \n    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;\n    margin-bottom: 40px !important;\n  }\n  \n  .pump-selector-container .form-grid {\n    display: grid !important;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;\n    gap: 20px !important;\n    margin-bottom: 20px !important;\n  }\n  \n  .pump-selector-container .form-group { \n    margin-bottom: 0 !important; \n  }\n  \n  .pump-selector-container .form-group input[type=\"number\"], \n  .pump-selector-container .form-group select { \n    width: 100% !important; \n    padding: 12px 14px !important; \n    border: 1.5px solid #e1e8ed !important; \n    border-radius: 8px !important; \n    box-sizing: border-box !important; \n    font-size: 15px !important;\n    background-color: #fff !important;\n    transition: all 0.2s ease !important;\n  }\n  \n  .pump-selector-container .form-group input[type=\"number\"]:focus, \n  .pump-selector-container .form-group select:focus { \n    outline: none !important;\n    border-color: #007cba !important;\n    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1) !important;\n  }\n  \n  .pump-selector-container .form-group select {\n    cursor: pointer !important;\n    appearance: none !important;\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5568' d='M6 9L1 4h10z'\/%3E%3C\/svg%3E\") !important;\n    background-repeat: no-repeat !important;\n    background-position: right 14px center !important;\n    padding-right: 36px !important;\n  }\n  \n  .pump-selector-container .advanced-options { \n    border-top: 1px solid #e1e8ed !important; \n    margin-top: 24px !important; \n    padding-top: 24px !important; \n  }\n  \n  .pump-selector-container .advanced-options h4 { \n    margin: 0 0 16px 0 !important; \n    font-size: 14px !important;\n    font-weight: 500 !important;\n    color: #4a5568 !important;\n    text-transform: uppercase !important;\n    letter-spacing: 0.3px !important;\n  }\n  \n  .pump-selector-container .checkbox-group { \n    display: flex !important; \n    align-items: center !important; \n  }\n  \n  .pump-selector-container .checkbox-group input[type=\"checkbox\"] { \n    margin-right: 10px !important; \n    width: 18px !important; \n    height: 18px !important; \n    flex-shrink: 0 !important;\n    cursor: pointer !important;\n  }\n  \n  .pump-selector-container .checkbox-group label { \n    margin-bottom: 0 !important; \n    font-weight: normal !important; \n    font-size: 15px !important; \n    color: #4a5568 !important;\n    cursor: pointer !important;\n  }\n  \n  .pump-selector-container .checkbox-group label a { \n    color: #007cba !important; \n    font-weight: 500 !important;\n    text-decoration: none !important;\n    border-bottom: 1px dotted #007cba !important;\n  }\n  \n  .pump-selector-container .checkbox-group label a:hover { \n    border-bottom-style: solid !important;\n  }\n  \n  \/* \u6309\u94ae\u6837\u5f0f - \u589e\u5f3a\u4f18\u5148\u7ea7 *\/\n  .pump-selector-container #find-pump-btn { \n    background: linear-gradient(135deg, #007cba 0%, #005f9a 100%) !important;\n    color: white !important; \n    padding: 14px 32px !important; \n    border: none !important; \n    border-radius: 8px !important; \n    cursor: pointer !important; \n    font-size: 15px !important; \n    font-weight: 600 !important;\n    letter-spacing: 0.5px !important;\n    text-transform: uppercase !important;\n    transition: all 0.3s ease !important;\n    margin-top: 24px !important;\n    box-shadow: 0 4px 12px rgba(0, 124, 186, 0.2) !important;\n  }\n  \n  .pump-selector-container #find-pump-btn:hover { \n    transform: translateY(-1px) !important;\n    box-shadow: 0 6px 20px rgba(0, 124, 186, 0.3) !important;\n  }\n  \n  .pump-selector-container #find-pump-btn:active {\n    transform: translateY(0) !important;\n  }\n  \n  .pump-selector-container #pump-results h3 { \n    font-size: 16px !important;\n    font-weight: 500 !important;\n    color: #4a5568 !important; \n    margin: 32px 0 24px 0 !important;\n    text-transform: uppercase !important;\n    letter-spacing: 0.5px !important;\n  }\n  \n  \/* \u7ed3\u679c\u5361\u7247\u6837\u5f0f *\/\n  .pump-selector-container .pump-result-card { \n    background: #fff !important;\n    border: 1px solid #e1e8ed !important; \n    border-radius: 10px !important; \n    margin-bottom: 16px !important; \n    overflow: hidden !important; \n    transition: all 0.3s ease !important;\n  }\n  \n  .pump-selector-container .pump-result-card:hover {\n    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;\n    transform: translateY(-2px) !important;\n  }\n  \n  .pump-selector-container .pump-result-card .card-header { \n    background: linear-gradient(135deg, #f7f9fb 0%, #ffffff 100%) !important;\n    padding: 18px 24px !important; \n    border-bottom: 1px solid #e1e8ed !important; \n  }\n  \n  .pump-selector-container .pump-result-card .card-header a { \n    font-size: 18px !important; \n    font-weight: 600 !important; \n    color: #1a1a1a !important; \n    text-decoration: none !important;\n    transition: color 0.2s ease !important;\n  }\n  \n  .pump-selector-container .pump-result-card .card-header a:hover { \n    color: #007cba !important;\n  }\n  \n  .pump-selector-container .pump-result-card .card-body { \n    padding: 24px !important; \n  }\n  \n  .pump-selector-container .pump-result-card .card-body ul { \n    list-style: none !important; \n    padding: 0 !important; \n    margin: 0 !important; \n    display: grid !important; \n    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; \n    gap: 18px !important; \n  }\n  \n  .pump-selector-container .pump-result-card .card-body li { \n    font-size: 14px !important;\n  }\n  \n  .pump-selector-container .pump-result-card .card-body li strong { \n    display: block !important; \n    color: #718096 !important;\n    font-weight: 500 !important;\n    font-size: 12px !important;\n    text-transform: uppercase !important;\n    letter-spacing: 0.3px !important;\n    margin-bottom: 4px !important;\n  }\n  \n  .pump-selector-container .pump-result-card .card-body li span { \n    color: #2d3748 !important;\n    font-size: 15px !important;\n    font-weight: 500 !important;\n  }\n  \n  \/* \u5361\u7247\u6309\u94ae\u6837\u5f0f - \u4fee\u590d *\/\n  .pump-selector-container .card-buttons { \n    margin-top: 24px !important; \n    padding-top: 24px !important; \n    border-top: 1px solid #e1e8ed !important; \n    display: flex !important; \n    flex-wrap: wrap !important; \n    gap: 12px !important; \n  }\n  \n  .pump-selector-container .btn-card { \n    display: inline-flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    padding: 10px 20px !important; \n    border-radius: 6px !important; \n    font-size: 13px !important; \n    font-weight: 600 !important;\n    text-transform: uppercase !important;\n    letter-spacing: 0.5px !important;\n    text-decoration: none !important; \n    cursor: pointer !important; \n    transition: all 0.2s ease !important;\n  }\n  \n  .pump-selector-container .btn-datasheet {\n    background-color: #f7f9fb !important;\n    color: #4a5568 !important;\n    border: 1.5px solid #cbd5e0 !important;\n  }\n  \n  .pump-selector-container .btn-datasheet:hover {\n    background-color: #edf2f7 !important;\n    border-color: #a0aec0 !important;\n    color: #2d3748 !important;\n  }\n  \n  .pump-selector-container .btn-add-quote {\n    background: linear-gradient(135deg, #007cba 0%, #005f9a 100%) !important;\n    color: #fff !important;\n    border: 1.5px solid #007cba !important;\n  }\n  \n  .pump-selector-container .btn-add-quote:hover {\n    background: linear-gradient(135deg, #005f9a 0%, #004a7a 100%) !important;\n    transform: translateY(-1px) !important;\n    box-shadow: 0 4px 12px rgba(0, 124, 186, 0.2) !important;\n  }\n  \n  .pump-selector-container #show-more-btn {\n    background-color: transparent !important;\n    color: #007cba !important;\n    padding: 12px 24px !important;\n    border: 2px solid #007cba !important;\n    border-radius: 6px !important;\n    cursor: pointer !important;\n    font-size: 14px !important;\n    font-weight: 600 !important;\n    text-transform: uppercase !important;\n    letter-spacing: 0.5px !important;\n    transition: all 0.3s ease !important;\n  }\n  \n  .pump-selector-container #show-more-btn:hover {\n    background-color: #007cba !important;\n    color: white !important;\n    box-shadow: 0 4px 12px rgba(0, 124, 186, 0.2) !important;\n  }\n  \n  .pump-selector-container #pump-results > p {\n    text-align: center !important;\n    color: #718096 !important;\n    font-size: 15px !important;\n    padding: 40px 20px !important;\n    background: #f7f9fb !important;\n    border-radius: 8px !important;\n    margin: 20px 0 !important;\n  }\n  \n  @media (max-width: 768px) {\n    .pump-selector-container {\n      margin-top: 40px !important;\n    }\n    .pump-selector-container .selector-intro h2 {\n      font-size: 26px !important;\n    }\n    .pump-selector-container .form-grid {\n      grid-template-columns: 1fr !important;\n    }\n    .pump-selector-container .pump-result-card .card-body ul {\n      grid-template-columns: 1fr !important;\n    }\n    .pump-selector-container .autocomplete-item-details span {\n      display: block !important;\n      margin-right: 0 !important;\n      margin-bottom: 2px !important;\n    }\n  }\n<\/style>\n\n<div class=\"pump-selector-container\">\n  <div class=\"selector-intro\">\n    <h2>BLDC Pump Selector Tool<\/h2>\n    <p>Since 2009, we've specialized in compact, high-reliability circulation pumps. Use this tool to find the perfect pump for your project's exact requirements.<\/p>\n  <\/div>\n  \n  <!-- \u5feb\u901f\u641c\u7d22\u533a\u57df -->\n  <div class=\"quick-search-section\">\n    <div class=\"quick-search-header\">\n      <h3>Quick Model Search<\/h3>\n      <p>Know your model? Type to search directly<\/p>\n    <\/div>\n    <div class=\"model-search-container\">\n      <input type=\"text\" \n             id=\"model-search-input\" \n             class=\"model-search-input\" \n             placeholder=\"Type model name (e.g., DC50E-12110)\"\n             autocomplete=\"off\">\n      <svg class=\"search-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n        <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\" \/>\n      <\/svg>\n      <div id=\"autocomplete-dropdown\" class=\"autocomplete-dropdown\"><\/div>\n    <\/div>\n  <\/div>\n  \n  <!-- \u4f18\u5316\u540e\u7684\u5206\u9694\u7ebf -->\n  <div class=\"section-divider\">\n    <span>Advanced Selector<\/span>\n  <\/div>\n  \n  <!-- \u9009\u62e9\u5668\u8868\u5355 -->\n  <div class=\"pump-selector-form\">\n    <div class=\"form-grid\">\n      <div class=\"form-group\">\n        <label for=\"required_head\">\n          Head Height (M)\n          <span class=\"label-hint\">Pumping height in meters<\/span>\n        <\/label>\n        <input type=\"number\" id=\"required_head\" name=\"required_head\" placeholder=\"Enter value\">\n      <\/div>\n      <div class=\"form-group\">\n        <label for=\"required_flow\">\n          Flow Rate @ Head (L\/H)\n          <span class=\"label-hint\">Required flow at specified head<\/span>\n        <\/label>\n        <input type=\"number\" id=\"required_flow\" name=\"required_flow\" placeholder=\"Enter value\">\n      <\/div>\n      <div class=\"form-group\">\n        <label for=\"rated_voltage\">\n          Voltage (Optional)\n          <span class=\"label-hint\">Filter by voltage<\/span>\n        <\/label>\n        <select id=\"rated_voltage\" name=\"rated_voltage\">\n          <option value=\"\">All Voltages<\/option>\n        <\/select>\n      <\/div>\n    <\/div>\n    \n    <div class=\"advanced-options\">\n      <h4>Advanced Options<\/h4>\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"customizable_only\" name=\"customizable_only\">\n        <label for=\"customizable_only\">\n          Show only models supporting <a href=\"https:\/\/www.bldcpump.com\/es\/additional-functions\/\" target=\"_blank\">Additional Functions<\/a>\n        <\/label>\n      <\/div>\n    <\/div>\n    \n    <button id=\"find-pump-btn\">Find Matching Pumps<\/button>\n  <\/div>\n  \n  <div id=\"pump-results\">\n    <p>Enter your required specifications and click \"Find Matching Pumps\" to see recommendations<\/p>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"><\/script>\n<script>\njQuery(document).ready(function($) {\n  \n  \/\/ \u9875\u9762\u52a0\u8f7d\u65f6\u83b7\u53d6\u6240\u6709\u53ef\u7528\u7684\u7535\u538b\u9009\u9879\n  $.post('\/wp-admin\/admin-ajax.php', {\n    'action': 'get_voltage_options'\n  }, function(response) {\n    if(response.success && response.data) {\n      var voltageSelect = $('#rated_voltage');\n      voltageSelect.html('<option value=\"\">All Voltages<\/option>');\n      response.data.forEach(function(voltage) {\n        voltageSelect.append('<option value=\"' + voltage + '\">' + voltage + '<\/option>');\n      });\n    }\n  });\n  \n  \/\/ ============ \u578b\u53f7\u81ea\u52a8\u5b8c\u6210\u529f\u80fd ============\n  var searchTimeout;\n  var selectedIndex = -1;\n  \n  $('#model-search-input').on('input', function() {\n    var query = $(this).val().trim();\n    \n    if (query.length < 2) {\n      $('#autocomplete-dropdown').removeClass('show').empty();\n      return;\n    }\n    \n    clearTimeout(searchTimeout);\n    searchTimeout = setTimeout(function() {\n      $.post('\/wp-admin\/admin-ajax.php', {\n        'action': 'search_pump_models',\n        'query': query\n      }, function(response) {\n        if (response.success && response.data && response.data.length > 0) {\n          displayAutocomplete(response.data, query);\n        } else {\n          $('#autocomplete-dropdown').html('<div class=\"no-results\">No models found<\/div>').addClass('show');\n        }\n      });\n    }, 300);\n  });\n  \n  \/\/ \u663e\u793a\u81ea\u52a8\u5b8c\u6210\u7ed3\u679c\n  function displayAutocomplete(results, query) {\n    var dropdown = $('#autocomplete-dropdown');\n    dropdown.empty();\n    selectedIndex = -1;\n    \n    results.forEach(function(pump, index) {\n      \/\/ \u9ad8\u4eae\u5339\u914d\u7684\u6587\u5b57\n      var highlightedTitle = pump.title.replace(\n        new RegExp('(' + query.replace(\/[.*+?^${}()|[\\]\\\\]\/g, '\\\\$&') + ')', 'gi'),\n        '<mark>$1<\/mark>'\n      );\n      \n      var item = $('<div class=\"autocomplete-item\" data-index=\"' + index + '\">');\n      item.html(\n        '<div class=\"autocomplete-item-title\">' + highlightedTitle + '<\/div>' +\n        '<div class=\"autocomplete-item-details\">' +\n        '<span>Voltage: ' + pump.voltage + '<\/span>' +\n        '<span>Head: ' + pump.max_head + '<\/span>' +\n        '<span>Flow: ' + pump.max_flow + '<\/span>' +\n        '<span>Inlet: ' + pump.inlet + '<\/span>' +\n        '<span>Outlet: ' + pump.outlet + '<\/span>' +\n        '<\/div>'\n      );\n      \n      \/\/ \u4fee\u6539\uff1a\u5728\u65b0\u6807\u7b7e\u9875\u6253\u5f00\n      item.on('click', function() {\n        window.open(pump.link, '_blank');\n      });\n      \n      dropdown.append(item);\n    });\n    \n    dropdown.addClass('show');\n  }\n  \n  \/\/ \u952e\u76d8\u5bfc\u822a\n  $('#model-search-input').on('keydown', function(e) {\n    var items = $('.autocomplete-item');\n    var itemCount = items.length;\n    \n    if (itemCount === 0) return;\n    \n    switch(e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        selectedIndex = (selectedIndex + 1) % itemCount;\n        updateSelection(items);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        selectedIndex = selectedIndex <= 0 ? itemCount - 1 : selectedIndex - 1;\n        updateSelection(items);\n        break;\n      case 'Enter':\n        e.preventDefault();\n        if (selectedIndex >= 0) {\n          items.eq(selectedIndex).click();\n        }\n        break;\n      case 'Escape':\n        $('#autocomplete-dropdown').removeClass('show').empty();\n        selectedIndex = -1;\n        break;\n    }\n  });\n  \n  function updateSelection(items) {\n    items.removeClass('selected');\n    if (selectedIndex >= 0) {\n      items.eq(selectedIndex).addClass('selected');\n    }\n  }\n  \n  \/\/ \u70b9\u51fb\u5916\u90e8\u5173\u95ed\u4e0b\u62c9\u6846\n  $(document).on('click', function(e) {\n    if (!$(e.target).closest('.model-search-container').length) {\n      $('#autocomplete-dropdown').removeClass('show').empty();\n      selectedIndex = -1;\n    }\n  });\n  \n  \/\/ ============ \u539f\u6709\u7684\u67e5\u627e\u529f\u80fd ============\n  $('#find-pump-btn').on('click', function() {\n    \n    var head = $('#required_head').val();\n    var flow = $('#required_flow').val();\n    var voltage = $('#rated_voltage').val();\n    var customizable = $('#customizable_only').is(':checked');\n    \n    if (head === '' || flow === '') {\n      alert('Please enter both Head Height and Flow Rate to proceed.');\n      return;\n    }\n    \n    $('#pump-results').html('<p style=\"padding: 60px 20px;\"><strong>Searching...<\/strong><br>Finding pumps that match your requirements<\/p>');\n    \n    var data = {\n      'action': 'find_my_pump',\n      'required_head': head,\n      'required_flow': flow,\n      'rated_voltage': voltage,\n      'customizable_only': customizable\n    };\n    \n    $.post('\/wp-admin\/admin-ajax.php', data, function(response) {\n      $('#pump-results').html(response);\n    });\n    \n  });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>BLDC Pump Selector Tool Since 2009, we&#8217;ve specialized in compact, high-reliability circulation pumps. Use this tool to find the perfect pump for your project&#8217;s exact requirements. Quick Model Search Know your model? Type to search directly Advanced Selector Head Height (M) Pumping height in meters Flow Rate @ Head (L\/H) Required flow at specified head [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"class_list":["post-107598","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bldcpump.com\/es\/wp-json\/wp\/v2\/pages\/107598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bldcpump.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bldcpump.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bldcpump.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bldcpump.com\/es\/wp-json\/wp\/v2\/comments?post=107598"}],"version-history":[{"count":13,"href":"https:\/\/www.bldcpump.com\/es\/wp-json\/wp\/v2\/pages\/107598\/revisions"}],"predecessor-version":[{"id":107621,"href":"https:\/\/www.bldcpump.com\/es\/wp-json\/wp\/v2\/pages\/107598\/revisions\/107621"}],"wp:attachment":[{"href":"https:\/\/www.bldcpump.com\/es\/wp-json\/wp\/v2\/media?parent=107598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}