使用jQuery将参数添加到href

pdtvr36n 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(122)

我有一个链接看起来像这样。

<a id="link" href="../customer_record/?id=1&customer_id=2"></a>

我也有一个输入框如下。

<input type="text" id="search">

我试图让jQuery在用户输入框时向链接添加一个参数。

// add search to link
$('#search').on('keyup', function(){
    var href = $('#link').attr("href");
    var data = $(this).val();
  $('#link').attr('href', href + '&search-string=' + data);
});

我不认为我离得很远，但我就是不能让它工作。
任何帮助将不胜感激。

jquery

来源：https://stackoverflow.com/questions/77135291/add-parameter-to-href-using-jquery

2条答案

按热度按时间

bbmckpt71#

您可以使用URL API的URLSearchParams: set() method设置URL查询字符串。请参见以下示例。

// add search to link
$('#search').on('keyup', function() {
  var href = $('#link')[0].href;
  var urlHref = new URL(href);
  urlHref.searchParams.set('search-string', $(this).val());
  $('#link').attr("href", urlHref);
  console.log($('#link').attr("href"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="link" href="../customer_record/?id=1&customer_id=2">link</a>
<input type="text" id="search">

赞(0）回复(0）举报 2023-10-17

xu3bshqb2#

$(document).ready(function() {
    // Store the original href in a variable
    var originalHref = $('#link').attr("href");

    $('#search').on('keyup', function() {
        var data = $(this).val();
        var newHref = updateQueryStringParameter(originalHref, 'search-string', data);
        $('#link').attr('href', newHref);
        console.log($('#link').attr("href"));
    });

    function updateQueryStringParameter(uri, key, value) {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        } else {
            return uri + separator + key + "=" + value;
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="link" href="../customer_record/?id=1&customer_id=2">test</a>
<input type="text" id="search">

你几乎在那里

<a id="link" href="../customer_record/?id=1&customer_id=2"></a>
<input type="text" id="search">

<script>
$(document).ready(function() {
    // Store the original href in a variable
    var originalHref = $('#link').attr("href");

    $('#search').on('keyup', function() {
        var data = $(this).val();
        var newHref = updateQueryStringParameter(originalHref, 'search-string', data);
        $('#link').attr('href', newHref);
    });

    function updateQueryStringParameter(uri, key, value) {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        } else {
            return uri + separator + key + "=" + value;
        }
    }
});
</script>

赞(0）回复(0）举报 2023-10-17

我来回答

使用jQuery将参数添加到href

2条答案

相关问题

热门标签

最新问答