Question

我试图构建一个搜索表单并在wordpress上搜索从表单中的两个选择元素中获取值。谁知道怎么样？我必须使用JS，AJAX或两者吗？任何帮助将不胜感激。

function categories_header_form()
{
?>
  <div id="header-form">
    <h3 class="form-title">
        <?php echo 'Αναζήτηση προϊόντων ανά περιοχή' ?>
    </h3>
    <form id="search-form" action="<?php bloginfo('url'); ?>" method="get" >
      <div class="form-container">

        <?php nomoi(); ?>

        <?php products_selection(); ?>

        <button type="submit" class="button" id="search-form-button">Εύρεση</button>
      </div>
    </form>
  </div>
<?php
}

function products_selection()
{
    $args = array(
      'post_type'   => 'seller',
      'taxonomy'    => 'category',
      'hide_empty'  => 0,
      'exclude'     => 1,1078,1079
    );
    $products = get_categories( $args );

    if ( $products ) {
    echo '<select id="products-select">';
      echo '<option selected="" disabled="" value="0"><span>Προϊόντα</span></option>';

      foreach ($products as $product) {
        echo '<option class="product-name" id="'. $product->term_id .'">'. $product->name .'</option>';
      }
    echo '</select>';
  }
}

function nomoi()
{
  $args = array(
    'post_type' => 'seller',
    'taxonomy'  => 'nomos',
    'hide_empty'=> 0,
    'parent'    => 0
  );

  $categories = get_categories( $args );

  if ( $categories ) {
    echo '<select id="nomoi-select" name="nomoi">';
      echo '<option selected="selected" disabled="disabled"><span>Νομοί</span></option>';

      foreach ( $categories as $category ) {
        $id = $category->term_id;
        $name = $category->name;
        echo '<option class="nomos" id="'. $id .'">'. $name .'</option>';
      }
    echo '</select>';
    echo '<select id="town-select" name="towns">';
      echo '<option class="town-disabled" selected="selected" disabled="disabled"><span>Πόλεις</span></option>';
    echo '</select>';
  }
}

这是我的搜索表单以及select标签。我是JS和AJAX的首发，并且不知道如何正确执行查询。第二个选择字段通过AJAX填充

Answer 1

Here is one way you could do it. Listen for changes to the select elements and save the value. Then use the values in the for the search query.

(function(doc, undefined) {

  /** these 2 var must be available to the whole function */
  var el1, el2;

  var getSelectedValue = function(el) {
    /**
     * @params {object} el - HTML Element
     * @returns {string}
     */
    return el.selectedOptions[0].value;
  };

  var getSearchString = function(select1, select2) {
    /**
     * @params {object} el1 - HTML Element
     * @params {object} el2 - HTML Element
     * @returns {string}
     */
    return [getSelectedValue(select1), getSelectedValue(select2)].join(' ');
  };

  function delegator(event) {
    /**
     * @params {object} - Event Object
     * When change event occurs, evaluate the definition of el1 and el2.
     * Assign value to el1 if assigned already.
     * If el1 is assigned, check value of el2 and assign.
     * If both have valid assignments to the objects we need, then we can get the search string.
     */
    switch (event.type) {
      case 'change':
        if (el1 === undefined && el2 === undefined) {
          el1 = event.target;
        } else if (el1 instanceof HTMLSelectElement && el2 === undefined) {
          el2 = event.target;
        }
        if (el1 instanceof HTMLSelectElement && el2 instanceof HTMLSelectElement) {
          doc.getElementById('search').setAttribute('value', getSearchString(el1, el2));
        }
        break;
    }

  }
  doc.addEventListener('change', delegator, false);
}(document, undefined));

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Get Search String</title>
</head>

<body>


  <form id="my-select-form" name="my-select-form">
    <select id="products-select">
      <option selected="" disabled="" value="0"><span>Προϊόντα</span>
      </option>
      <option class="product-name" id="product_term_id">product_name</option>
    </select>

    <select id="nomoi-select" name="nomoi">
      <option selected="selected" disabled="disabled"><span>Νομοί</span>
      </option>
      <option class="nomos" id="id">name</option>
    </select>

    <select id="town-select" name="towns">
      <option class="town-disabled" selected="selected" disabled="disabled"><span>Πόλεις</span>
      </option>
      <option>Two</option>
      <option>Three</option>
    </select>
  </form>

  <form id="my-search-form">
    <input id="search" type="search" />
  </form>

</body>

</html>

从三个选择元素构造搜索字符串？

1 个答案: