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

Posted 2023-05-09

【中文标题】如何从下拉列表中单击链接并通过实时搜索显示在文本框中，然后在删除时删除值

【英文标题】：How to click link from dropdown and display in textbox with live search then remove value when deleted

【发布时间】：2017-06-22 06:03:53

【问题描述】：

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

我的输入框如下

     <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 的专家，我欢迎所有批评。 提前致谢！

【参考方案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);
                
            );
);

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

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

【讨论】：

感谢 Nirav 的回复...我正在寻找一种从下拉列表中获取所选项目并将该选择的值放入文本框中的方法。

我想我正在寻找类似于 Ajax 实时搜索的东西，但它不会将下拉列表中的项目链接到另一个页面，它只会将用户选择放入文本框中，以便可以发送表单的其余部分稍后更新，而不是立即更新。