自动完成功能不适用于最后一个退格的div标签 [英] Autocomplete is not working for div tag for the last backspace

问题描述

  - 场景
 
我获得了自动完成功能的任务，其中自动完成功能将在div标签中，而不是在文本框中显示为下拉列表。最初我觉得很容易。但是当我尝试在div标签中执行此操作时遇到的一个问题。 
 
  - 假设我有一个文本框。假设我有如下记录集。 
 Anurag 
 Antony 
 Ajay 
 Alex 
 
当我开始输入A.我在div标签中获得所有自动完成建议。但是当我点击最后一个退格时，div标签中的建议并没有明确。 
 
所以我开始比较正常的自动完成，其中的建议就在文本框的下方，而我在div标签中尝试的自动完成。 
 
当我在文本框中输入内容并按退格键时，当我点击最后一个退格键以清除文本框时，它不会进入调试器。那么有没有办法在div标签中执行自动完成？

 -------- ------我在想什么------ 
 
< style type =text / css> 
 .searchBox {
 background-image：url（'Images / perfectlens.PNG'）; 
 background-repeat：no-repeat; 
 padding-left：20px; 
} 
 
 .text-label {
 color：#cdcdcd; 
 font-weight：bold; 
} 
 
 .focus {
 border：2px solid＃AA88FF; 
 background-color：#FFEEAA; 
} 
< / style> 
 
 
 
< link rel =stylesheethref =http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui .css/> 
< script src =http://code.jquery.com/jquery-1.9.1.js>< / script> 
< script src =http://code.jquery.com/ui/1.10.3/jquery-ui.js>< / script> 
< script type =text / javascript> 
 $（document）.ready 
（function（）{
 $（＃Employee）。autocomplete 
（{
 source：function（request，response） {
 $ .ajax（{
 url：/ SearchStore / Employeename，
类型：POST，
 dataType：json，
 data：{ term：request.term}，
 success：function（data）{
 $（'＃autocompleteindiv'）。text（''）; 
 if（data.length> 0）{ 
回复（$。map（数据，函数（item）{
 $（'＃autocompleteindiv'）。append（item.EmployeeNames +'< / br>'）; 
}）） 
} 
 else {
 $（'＃autocompleteindiv'）。text（''）; 
 $（'＃autocompleteindiv'）。append（'No Results Found'）; 
 
} 
} 
 
}）
}，
 minLength：1 
}）; 
}）
 
< / script> 
 
 
< div style =font-family：Arial> 
< input type =textclass =searchBox
 value =StoreNumber
 name =StoreNumberid =Employeetitle =Enter Store Number
 onfocus =if（value =='StoreNumber'）{value =''}; this.style.color ='＃000'; $ b $bönblur=if（value ==''）{value ='StoreNumber'}; this.style.color ='＃999'; size =15
 style =font-weight：bold; color：＃808080/> 
< / div> 
 
< div id =autocompleteindivstyle =background-color：grey; width：600px; height：600px>< / div> 
 
 ---请帮助我。

解决方案

（文件）.ready
（功能（）{

（＃Employee）。autocomplete
（{
source：function（request，response）{

< blockquote> .ajax（{
url：/ SearchStore / Employeename，
类型：POST，
dataType：json，
data：{term：request。 term}，
success：function（data）{

--Scenario

I am given a task for autocomplete feature where the autocomplete feature will be in div tag instead of the showing like dropdown in textbox. Initially i thought its easy. But one problem i faced when i tried to do it in div tag.

--Suppose i have a textbox. And suppose i have set of records as below.
Anurag
Antony
Ajay
Alex

When i start typing A. I get all the autocomplete suggestion in div tag. But when i hit the last backspace, the suggestion in div tag doesnt get clear. 

So i started comparing with the normal autocomplete where the suggestion comes just below the textbox and the autocomplete which i was trying in a div tag.

when i enter something in the textbox and and press backspace and when i hit last backspace to clear the textbox it doesnt go to the debugger. So is there any way to perform autocomplete in a div tag ?

--------------What i was trying ------

<style type="text/css">
    .searchBox {
        background-image: url('Images/perfectlens.PNG');
        background-repeat: no-repeat;
        padding-left: 20px;
    }

    .text-label {
        color: #cdcdcd;
        font-weight: bold;
    }

    .focus {
        border: 2px solid #AA88FF;
        background-color: #FFEEAA;
    }
</style>



<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready
        (function () {     
            $("#Employee").autocomplete
                ({
                    source: function (request, response) {
                        $.ajax({
                            url: "/SearchStore/Employeename",
                            type: "POST",
                            dataType: "json",
                            data: { term: request.term },
                            success: function (data) {
                                $('#autocompleteindiv').text('');
                                if (data.length > 0) {    
                                    response($.map(data, function (item) {
                                        $('#autocompleteindiv').append(item.EmployeeNames+ '</br>');
                                    }))
                                    }
                                else {
                                    $('#autocompleteindiv').text('');
                                    $('#autocompleteindiv').append('No Results Found');
                                   
                                }
                            }

                        })
                    },
                    minLength: 1
                });
        })

</script>


<div style="font-family: Arial">
    <input type="text" class="searchBox"
        value="StoreNumber"
        name="StoreNumber" id="Employee" title="Enter Store Number"
        onfocus="if (value == 'StoreNumber') {value=''};this.style.color='#000';"
         önblur="if (value== '') {value='StoreNumber'};this.style.color='#999';" size="15"
        style="font-weight: bold; color: #808080" />
</div>

<div id="autocompleteindiv" style="background-color:gray;width:600px;height:600px"></div>

---kindly help me.

解决方案

(document).ready (function () {

("#Employee").autocomplete ({ source: function (request, response) {

.ajax({ url: "/SearchStore/Employeename", type: "POST", dataType: "json", data: { term: request.term }, success: function (data) {

这篇关于自动完成功能不适用于最后一个退格的div标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！