Javascript 如何单击下拉列表中的链接，并使用live search显示在文本框中，然后在删除时删除该值

好的，下面是我最好的解释： 我期待建立一个搜索栏，将有一个默认值的当前位置

我的输入字段如下

     <div class="input-group col-sm-12">
        <label class="control-label" for="city"><h4>City</h4></label>
         <div class="inner-addon left-addon">
            <i class="glyphicon glyphicon-map-marker"></i>
            <input type="text" class="form-control input-lg city" id="city" 
value="Current Location" name="city" autocomplete="off">
         </div>
         <div id="here"></div>
     </div>

现在，当用户开始在文本框中输入位置时，它会进行实时搜索，并将值放入下拉框中。我有一个文本文件，我正在使用它来测试以下内容：

<div class="list-group">
  <a href="#" class="list-group-item city-link" id="1">San Jose</a>
  <a href="#" class="list-group-item city-link" id="2">San Juan</a>
  <a href="#" class="list-group-item city-link" id="3">San Julio</a>
</div>

下面是下拉列表的外观，它也很好地工作，并显示正确的数据。如果有5个以上的位置，我需要的是能够使其滚动：

我正在使用jquery从文本文件中获取值，但最终将是数据库

 // Live search code for cities on advanced modal
    $("#city").keyup(function () {
         if (this.value.length == 0) {
            document.getElementById("#here").innerHTML = "";
            return;
        }
        //Return value only after inputting 3 or more letters
        if (this.value.length < 4) return;
        //Show the values to the user
                $("#here").show();
                var x = $(this).val();
                $.ajax({
                    type: 'GET',
                    url: 'test2.txt',
                    data: 'q=' + x,
                    success: function (data) {
                        $("#here").html(data);
                    }
                });
    });

//高级模式下城市实时搜索代码
$（“#城市”）.keyup（函数（）{
if（this.value.length==0）{
document.getElementById（“#此处”）.innerHTML=“”；
返回；
}
//仅在输入3个或更多字母后返回值
如果（this.value.length<4）返回；
//向用户显示值
$（“#此处”）.show（）；
var x=$（this.val（）；
$.ajax({
键入：“GET”，
url:'test2.txt'，
数据：“q=”+x，
成功：功能（数据）{
$（“#此处”）.html（数据）；
}
});
});

我的问题是。。。我想允许用户在输入框中键入一个位置，在一个div中显示5个值（链接）的建议下拉列表，然后在需要时显示一个包含更多值的滚动条，然后如果用户单击其中一个链接，它将用值填充文本框。但如果他们改变主意并删除输入框中的值，它将用当前位置的默认值填充输入。同样在我当前的配置中，当我开始删除文本框中的值时，它不会更新下拉列表。如有任何建议，将不胜感激。 我不是Jquery的专家，我欢迎所有的批评。 提前谢谢

$（“#城市”）.keyup（函数（）{
$("#city").keyup(function () {
     if (this.value.length == 0) {
        document.getElementById("#here").innerHTML = "";
        this.value = "Current Location";
        return;
    }
    //Return value only after inputting 3 or more letters
    if (this.value.length < 4) return;
    //Show the values to the user
            $("#here").show();
            var x = $(this).val();
            $.ajax({
                type: 'GET',
                url: 'test2.txt',
                data: 'q=' + x,
                success: function (data) {
                    $("#here").html(data);
                }
            });
});

if（this.value.length==0）{
document.getElementById（“#此处”）.innerHTML=“”；
this.value=“当前位置”；
返回；
}
//仅在输入3个或更多字母后返回值
如果（this.value.length<4）返回；
//向用户显示值
$（“#此处”）.show（）；
var x=$（this.val（）；
$.ajax({
键入：“GET”，
url:'test2.txt'，
数据：“q=”+x，
成功：功能（数据）{
$（“#此处”）.html（数据）；
}
});
});

在这里你可以试试这个代码。当您从文本框中删除所有文本时，文本框的长度将为0，因此在此之后，您可以使用此代码将默认值设置为当前位置

---

试试看，可能会对你有所帮助：）

谢谢你的回复Nirav…我要寻找的是一种从下拉列表中获取所选项目并将所选项目的值放入文本框的方法。我想我要寻找的是类似于Ajax的实时搜索，但不是链接到其他页面的下拉列表中的项目，它只会将用户选择的内容放入文本框中，以便稍后将其与表单的其余部分一起发送，而不是立即更新。

$("#city").keyup(function () {
     if (this.value.length == 0) {
        document.getElementById("#here").innerHTML = "";
        this.value = "Current Location";
        return;
    }
    //Return value only after inputting 3 or more letters
    if (this.value.length < 4) return;
    //Show the values to the user
            $("#here").show();
            var x = $(this).val();
            $.ajax({
                type: 'GET',
                url: 'test2.txt',
                data: 'q=' + x,
                success: function (data) {
                    $("#here").html(data);
                }
            });
});