提问者:小点点

无javascript的高级搜索


我正在构建一个带有a标签的高级搜索,以过滤第一个字母abcdefghijklmnopqrstuvwxyz0-9,以及一个输入字段、其他条件的选项字段、单选按钮和一个提交按钮。当我点击一个字母过滤器时,它会将其作为$\u GET变量发送。但是当我使用输入字段时,它当然会忘记它。在将此变量与表单中的所有其他变量一起发送之前,如何使用submit按钮获取此变量?我必须使用JS和AJAX吗?你推荐这个吗?

编辑

所以让我重新表述一下。我有不同的变量要发送到服务器,这些变量来自输入字段、单选按钮、选项字段,但我还希望为字母表中的每个字母创建一个链接(这样它就会列出所有以该字母开头的条目)。当我单击submit按钮时,它会从输入字段发送所有变量,但不会从a标签发送(因为我猜它们不会被识别为表单字段)。当我点击a标签(一封信)时,它只向服务器发送变量,这也很好。我的问题是,如何让提交按钮发送所有内容?

    <input type='search' id='search-query' name='q' class='uk-input uk-form-width-medium' placeholder='Suche'>
    <p>
    <?php 
    foreach ($alphabet as $abc){
        if ($abc == $letter) {
            $class = 'current';
        }
        else $class = '';
        echo '<a class="'.$class.'" href="'.$page->url.'?letter='.$abc.'">'.$abc.'</a> ';
    }
    ?>
    </p>
    <select class="uk-select uk-width-medium" name="what">
        <option>Titel</option>
        <option>Autor</option>
        <option>Erscheinungsdatum</option>
    </select>
        <label><input class="uk-radio" type="radio" name="how" value="aufsteigend" checked> aufsteigend</label>
        <label><input class="uk-radio" type="radio" name="how" value="absteigend"> absteigend</label>
    <button class="uk-button uk-button-primary" type="submit">Suche starten</button>
</form>```


共2个答案

匿名用户

我假设你想有一个动态的谷歌式搜索,你在其中键入“a”,它会给你一个下拉列表的选项,如“飞机,苹果,动脉”等。如果是这样的话,那么是的,你确实需要JS AJAX。您可以让AJAX在输入字段中动态显示可用选项,而不是单击字母过滤器。考虑到对问题的模糊描述和用户界面图像的缺失,我们只能说这些了。

匿名用户

我并没有真正从解释中得到问题和整个情况,但听起来像以下内容:当用户单击特定按钮时,您希望根据输入字段的值呈现提示:...如果这是正确的,那么你将不得不无论如何发送一个get请求到后端,这样它就会返回带有所有提示的页面。

FE:

<html>
  <body>
    <form action="app.com/myurl" method="GET" >
      <input id="letter" value="a" name="letter" />
      <input id="letter2" value="b" name="other_param" />
      <input id="letter3" value="c" name="another_param" />
      <!-- All three  inputs will be visible in the $_GET variable when you send the request -->
      <!-- Other input fields here: <input type="whatever" id="whatever".../> -->
      <button type="submit">letter filter</button>
    </form>
  </body>
</html>