AJAX запрос mysql

130

25 апреля 2019, 04:00

Подскажите пожалуйста, есть ajax запрос данных из таблицы mysql:

<script>
       $(document).ready( function() {
            $('#client').keyup(function(){ /* client - id в инпуте куда мы вносим значение*/
                if($(this).val().length > 0){
                    $.ajax({
                        type: "POST",
                        url:"/autocomplete/auto_cl_task.php",
                        dataType: 'json',
                        data: {'choose' : $(this).val()},
                        success: function(res){
                            console.log(res);
                            var content = '';
                            $.each(res, function(i, item){
                                content += "<div class='ott_cl_task' data-id='"+res[i].id+"'>"+res[i].name+" "+res[i].lastname+"</div>";
                                $("#cl_task").css({"margin-top": "29px", "background": "#fff", "position": "absolute", "margin-left": "-20px", "width": "170px", "border": "2px dashed #e0e0e0", "text-align": "left", "padding": "5px", "font-size": "15px"});/*cl_task - id спана куда будут выводится результаты*/
                            });
                            $('.auto_cl_task').html(''); /* auto_cl_task - класс спана куда будут выводится результаты*/
                            $('.auto_cl_task').append(content); /* auto_cl_task - класс спана куда будут выводится результаты*/
                        }
                    });
                }else{
                    $('.auto_cl_task').html(''); /* auto_cl_task - класс спана куда будут выводится результаты*/
                }
            });
            $('body').on( 'click', '.ott_cl_task', function(){
                var id = $(this).attr('data-id');
                $('.user_id').val(id);
                var txt = $(this).text();
                $('#client').val(txt); /* client - id в инпуте куда мы вносим значение*/
                $('.auto_cl_task').html(''); /* auto_cl_task - класс спана куда будут выводится результаты*/
$("#cl_task").css({"display": "none"}); /*cl_task - id спана куда будут выводится результаты*/
            });
        } );
 </script>

Сейчас сделано так что когда происходит поиск span (куда выводится информация) изменяет свой стиль на данный:

$("#cl_task").css({"margin-top": "29px", "background": "#fff", "position": "absolute", "margin-left": "-20px", "width": "170px", "border": "2px dashed #e0e0e0", "text-align": "left", "padding": "5px", "font-size": "15px"});

Но когда мы выбрали результат из поиска, стиль данного span (который приведен выше) остается. Как его убрать после нажатия на данные из поиска? Сам span:

<span class='auto_cl_task' id='cl_task'></span>

Answer 1

<style>
.cl_task_temp_class {
  margin-top: 29px;
  background: #fff;
  position: absolute;
  ...
</style>
success: function(res){
  ...
  $("#cl_task").addClass("cl_task_temp_class"); // вместо $("#cl_task").css(...
$('body').on( 'click', '.ott_cl_task', function(){
  ...
  $("#cl_task").removeClass("cl_task_temp_class"); // вместо $("#cl_task").css(...

удалить класс если нажали вне этого span

$(document).on('click', function(e) {
  if (e.target.id != "cl_task" && !$(e.target).closest("#cl_task").length) {
    $("#cl_task").removeClass("cl_task_temp_class");
  }
});