【问题标题】:Jquery replacing space in search form with #Jquery用#替换搜索表单中的空格
【发布时间】:2017-11-02 19:47:41
【问题描述】:

想知道是否有人可以建议为什么这不起作用。

当用户在搜索表单中输入 SPACE 时,将其替换为 #,,因此如果在搜索栏中键入“Red Boots size 9”,它将被替换为(#不会发送到数据库, 只是为了展示)#Red#boots#size#9

        $("#s").keyup(function () {
            var textValue = $(this).val();
            textValue =textValue.replace(/ /g,"#");
            $(this).val(textValue);
        });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form role="search" method="get" id="searchform" class="searchform" action="http://tag2.testsiteonline.co.uk/"> 
        <label class="screen-reader-text" for="s">Search for:</label> 
        <input type="text" value="" name="s" id="s" /> 
        <input type="submit" id="searchsubmit" value="Search" /> 
    </form>

头码

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
 <link rel="stylesheet" href="/fonts/styles.css">

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://tag2.testsiteonline.co.uk/searchjs.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

    <?php wp_head(); ?>
</head>

也在我的 searchjs.js 上 - 这就是我在那里的所有内容?在此之前或之后我应该有什么吗?

$("#s").keyup(function () {
        var textValue = $(this).val();
        textValue =textValue.replace(/ /g,"#");
        $(this).val(textValue);
    });

【问题讨论】:

  • 对我来说很好。你的 HTML 中包含 jQuery 吗?
  • 我创建了一个名为 searchjs.js 的页面,然后我在我的
  • 我也在使用 wordpress 网站,如果这会影响它?

标签: jquery forms input replace keyup


【解决方案1】:

您的代码运行良好,这里有一个 jsfiddle 来证明:http://jsfiddle.net/zez7w74d/

将您的 &lt;head&gt; 内容发布到您正在加载 js 文件的位置,以检查可能的中断。

编辑: 从 wordpress 中删除所有手动加载的 jQuery,因为 wordpress 根据他们的开发页面附带 jQuery:https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

然后像这样调用你的 jQuery 代码:

jQuery("#s").keyup(function () {
        var textValue = $(this).val();
        textValue =textValue.replace(/ /g,"#");
        $(this).val(textValue);
});

【讨论】:

  • 谢谢,我已将头部代码添加到顶帖。
  • 您正在加载两个版本的 jQuery &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt; 尝试删除第一个。
  • 已删除.. 仍然没有。我什至把表格放到一个页面上,制作一个 wordpress 页面模板,看看是否有帮助。还是什么都没有tag2.testsiteonline.co.uk/24456-2
  • 底部还有一个 jQuery &lt;script type='text/javascript' src='http://tag2.testsiteonline.co.uk/wp-includes/js/jquery/jquery.js?ver=1.12.4'&gt;&lt;/script&gt; 另外,我在网站上找不到你的 jQuery 代码。
  • 其他代码将与 wordpress 分开?我可以去掉吗?我已经通过 FTP 上传了。
猜你喜欢
  • 2019-04-19
  • 2013-08-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-19
  • 1970-01-01
相关资源
最近更新 更多