Question

所以我在输入框正常运行时遇到了一些麻烦。我有一个Ajax实时搜索文本框，当用户开始输入一个值（从数据库中获取这些值）时，它会删除文本框下面的建议...我有那个部分正在工作。

我想要的是用户能够在下拉列表中单击其中一个项目，然后该项目的值将显示（放入）文本框中。（我是否需要将它们设为链接或将它们保留为div？）

//Textbox that the user will type a value in
<input type="text" name="searchTerm" placeholder="Search" autocomplete="off">

//This is the div that will dropdown below the textbox
 <div class="div-table" role="scroll">
         <div class="div-table-row">
            <div class="div-table-col" id="id1">City1</div>
            <div class="div-table-col" id="id2">City2</div>
            <div class="div-table-col" id="id3">City3</div>
         </div>
</div>

我将下拉列入了一定高度。我使用role =“scroll”添加了一个滚动函数。我还在此文本框上有另一个函数，如果它保留为空，则在文本框中保留默认值。它在下面：

//This piece of jquery puts the default CURRENT SearchTerm value inside the dropdown and removes it if input onfocused.
    $('input.searchTerm').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.searchTerm').on('blur', function () {
        // on blur, if there is no value, set the defaultText
        if ($(this).val() == '') $(this).val($(this).data('defaultText'));
    });

我在下面尝试了这段代码，但它对我不起作用。任何有关小提琴解决方案的建议或链接都将不胜感激。

$('.div-table-col').click(function () {
       var value = $(this).text();
       var input = $('input[name=searchTerm]')
       input.val(value);
 });

另外，如果没有找到结果，如何在下拉列表中显示消息。提前致谢！：）

编辑：这是我通过Ajax显示的数据的代码。我不确定这里的某些内容是否可能导致错误，并且不会将值放入文本框中。

   var obj = JSON.parse(data.d);
   var divhtml = '<div class="div-table" id="list-group" role="scroll">';
   divhtml += '<div class="div-table-row"><div class="div-table-col city-link current-location-style" style="height:45px;padding:10px;" id="0">Current Location</div><div class="list-group-item list-city-style">City Name</div>';
   obj.forEach(function (city) {
   divhtml += '<div class="div-table-col"><a href="#" class="list-group-item city-link" id="' + city.City_ID + '">' + city.Name + ', ' + city.StateName + ', ' + city.CountryName + '</a></div>';
                        });
   divhtml += "</div>"

Answer 1

似乎点击功能确实有效，您只是忘记了第三行中的分号;。

工作示例：

//This piece of jquery puts the default CURRENT SearchTerm value inside the dropdown and removes it if input onfocused.
    $('input.searchTerm').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.searchTerm').on('blur', function () {
        // on blur, if there is no value, set the defaultText
        if ($(this).val() == '') $(this).val($(this).data('defaultText'));
    });
    
    
    $('.div-table-col').click(function () {
       var value = $(this).text();
       var input = $('input[name=searchTerm]');
       input.val(value);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// Textbox that the user will type a value in
<input type="text" name="searchTerm" placeholder="Search" autocomplete="off">

// This is the div that will dropdown below the textbox
 <div class="div-table" role="scroll">
         <div class="div-table-row">
            <div class="div-table-col" id="id1">Customer.name1</div>
            <div class="div-table-col" id="id2">Customer.name2</div>
            <div class="div-table-col" id="id3">Customer.name3</div>
         </div>
</div>

如何在单击时将div下拉值放入文本框中

1 个答案: