Как сделать список jquery кликабельным? - PullRequest
Новая
       18

Как сделать список jquery кликабельным?

0 голосов
/ 19 октября 2019

Заранее спасибо! Я получаю список результатов данных в порядке, и автозаполнение работает. Тем не менее, я хотел бы сделать список результатов кликабельным при щелчке мышью и заполнить поле ввода. Я предоставил различные элементы CSS, JQuery и HTML-кода. Я пробовал .click, .select и несколько других безрезультатно. Любое руководство приветствуется. Я 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 

    <style type="text/css">
        body{ font: 14px sans-serif; text-align: center; }
    }
    </style>

    <style type="text/css">
    body{
        font-family: Arail, sans-serif;
    }
    /* Formatting search box */
        .form-group{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
        border-radius: 4px;
    }
    .search-box2{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
        border-radius: 4px;
    }

    .search-box2 input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
        border-radius: 4px;
    }

    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box2 input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
        border-radius: 4px;
    }

    /* Formatting result items */
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        background: #ffffff;
        border-top: none;
        cursor: pointer;
    }
    .result p:hover{
        background: #f2f2f2;
    }
</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.search-box2 input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("backend-search2.php", {term: 
     inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });

    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){
        $(this).parents(".search- 
    box2").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>

<div class="search-box2">
<input type="text" autocomplete="off" placeholder="Enter your occupation..." class="form-control" />
<div class="result"></div>
</div>
...