javascript - 如何单击下拉列表中的链接并通过实时搜索显示在文本框中，然后在删除时删除值

Question

好的，这是我最好的解释: 我希望构建一个默认值为当前位置的搜索栏。

我的输入框如下

     <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>

我正在使用下面的代码在文本框中保留“当前位置”的默认值，因此如果用户在文本框为空时在文本框外单击，“当前位置”值将填充文本框。这部分效果很好。当文本框为空时显示“当前位置”。

$('input.city').on('focus', function () {
            // On first focus, check to see if we have the default text saved
            // If not, save current value to data()
            if (!$(this).data('defaultText')) $(this).data('defaultText', 
    $(this).val());

            // check to see if the input currently equals the default before 
    clearing it
            if ($(this).val() == $(this).data('defaultText')) $(this).val('');
        });
        $('input.city').on('blur', function () {
            // on blur, if there is no value, set the defaultText
            if ($(this).val() == '') $(this).val($(this).data('defaultText'));
        });

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

<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);
                    }
                });
    });

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

Answer 1

$("#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);
                }
            });
});

Here you can try this code. when you remove all text from your text box than it's length will be 0 so after that you can set your default value to Current Location With this code.

试试吧，它可能对你有帮助:)