Jquery 将搜索表单中的 space 替换为 #
Jquery replacing space in search form with #
想知道是否有人可以建议为什么这不起作用。
这个想法是当用户在搜索表单中输入 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);
});
你的代码工作正常,这里有一个 jsfiddle 来证明:http://jsfiddle.net/zez7w74d/
Post 您的 <head>
内容,您正在加载 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);
});
想知道是否有人可以建议为什么这不起作用。
这个想法是当用户在搜索表单中输入 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);
});
你的代码工作正常,这里有一个 jsfiddle 来证明:http://jsfiddle.net/zez7w74d/
Post 您的 <head>
内容,您正在加载 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);
});