实时搜索建议

Question

我使用 ajax 创建了一个连接到数据库（站点电子商务）的实时搜索。 当输入中有一个值时，屏幕上会提取几个建议。 我想在客户点击建议时获取 ID。 这些建议无法点击我不知道为什么：！ 这是我的 jquery 代码：

    $('.clicked').click(function() {
        console.log($("#input_value").val());
        
    });

    var x;
    var value = $("#input_value").val();
    $('.clicked').click(function() {
    $.ajax({
        type:'GET',
    //     // url: 'test.php?name=' + $("#testo").val(),
        data: { name : value },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        success: function()
        {
            window.location.href = 'un_produit.php?id=' + $("#input_value").val();
        
        }
    });

我试图将 class 添加到一个 div 中，当我点击它时它可以工作，但它不适用于实时搜索的建议。

Answer 1

您可以使用JQUERY自动完成，而不是使用AJAX请求。
这是一个关于其工作原理的简单示例，您的 URL 源应该以这种格式返回数据：

 [{"label": "item 1", "value": "0"}, {"label": "item 2", "value": "2"}, {"label": "item 3", "value": "3"}]

我用这个 url 作为参考： https://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/

 $(function() { $("#autocomplete").autocomplete({ source: [{"label": "item 1", "value": "0"}, {"label": "item 2", "value": "2"}, {"label": "item 3", "value": "3"}], // this can be an url as well select: function( event, ui ) { var label = ui.item.label; if (label === "no results") { // this prevents "no results" from being selected event.preventDefault(); } else { /* do something with the selected result */ $("#autocomplete").val(ui.item.label); event.preventDefault(); // or get the id $("#autocomplete").val(ui.item.value); } } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:-- jQuery UI library --> <link rel="stylesheet" href="https.//ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script> <input type="text" id="autocomplete">

Answer 2

问题已解决，我必须将class="clicked"添加到建议 div 的子元素中，而不是添加到 div 本身。 谢谢