Question

我有一个用户个人资料页面，其中第一部分是静态的，最后一部分是动态的

    <a href="mywebsite.com/view/[ID]"> View profile </a>

我想创建一个输入框，我可以在输入框中输入id，并给出带有输入框值的id auto auto complete。

Type user ID [input-box]
<a href="mywebsite.com/view/[input-box value]"> View profile </a>

请告诉我该怎么做。

Answer 1

我会使用jQuery，即：

$( "#in" ).keyup(function() {
var value = $(this).val();
$( "#out" ).text( '<a href="https://mywebsite.com/view/'+value+'"> View profile </a>' );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="in">
<p id="out"></p>

PS：How is JavaScript different from Java?

Answer 2

您可以使用location.replace函数将URL替换为JavaScript。您可以将其与按钮的onclick事件联系起来。

Type user ID: <input type='text' id='userid'>
<button type='button' onclick="location.replace('http://mywebsite.com/view/'+document.getElementById('userid').value);">View Profile</button>

您可能希望添加一些错误处理代码。如果“用户ID”字段为空，该怎么办？如果他们输入“蘑菇”并且你期望一个数字怎么办？如果他们输入../../../index.html怎么办？如果只是为了你，那么你可以假设你会输入一些有效的东西。

Answer 3

您的代码可以是这样的，

    user ID: <input type="text" id="user_id" value="" onkeypup="javascript:change_url(this.value);”>

<a href="mywebsite.com/view/” id=“view_profile"> View profile </a>

上面的代码调用了每个键上的javascript函数change_url（）。

您可以在[head]标签之间的标题中或在[/ body]标记之前的底部编写该函数。

<script type="text/javascript">

    function change_url(input_user_id) {

        //-- get the value of old href
        var x = document.getElementById("view_profile").href;

        //-- append input-field user id
        x = x + "" + input_user_id;

        //-- set href value back with appened user_id
        document.getElementById("view_profile").href = x;
    }

</script>

使用超链接+输入框创建超链接

3 个答案: