Ссылка не кликабельна при первом клике

Question

У меня проблема с функцией поиска на моей веб-странице.

Страница содержит элемент автофокусировки для ввода текста.Когда пользователь печатает, выполняется запрос ajax, тогда JQuery заполняет div результатами поиска.Каждый результат поиска представляет собой <li> элемент со ссылкой внутри.

Вот как это выглядит:

Что я хочуДля этого нажмите на ссылку в результатах поиска (например, «iPhone SE»), чтобы открыть новую веб-страницу.

Теперь она работает в 2 клика - первый щелчок по ссылке теряет фокус при вводе текста, а второй открываетновая страница.

Есть идеи, как открыть ссылку в один клик, не теряя фокус ввода текста?

Код

HTML-макет для поиска:

            <!-- search form -->
            <div class="search-form d-none d-lg-inline-block">
                <div class="input-group">
                    <button type="button" name="search" id="search-btn" class="btn btn-flat">
                        <i class="mdi mdi-magnify"></i>
                    </button>
                    <input type="text" name="query" id="search-text" class="form-control" placeholder="Product name, Product code or Trade Document number" autofocus autocomplete="off" />
                </div>
                <div id="search-results-container">
                    <ul id="search-results-list"></ul>
                </div>
            </div>

JavaScript-код страницы:

$(function () {
    // ...
    addSearchHandler()
    // ...
});

addSearchHandler определен в другом файле search.js:

function addSearchHandler() {
    $("#search-text").on('change keyup copy paste cut', function() {
        var text = $('#search-text').val()
        if (text.length == 0 || text == '') {
            $('#search-results-list').html('')
            return
        }
        search(text)
    });
}

function search(term) {
    $.ajax({
        url: '/search?term=' + term,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data) {
            searchResults(data)
        },
        error: function (error) {
            console.log('search error')
        }
    })
}

function searchResults(data) {
    var html = ''

    if (data.length == 0) {
        $('#search-results-list').html('<li>No Result Found</li>')
        return
    }

    for (i = 0; i < data.length; i++) {
        var type = capitalizeFirstLetter(data[i].type)
        var url = '#'
        var code = ''

        if (data[i].type == 'PRODUCT') {
            url = getProductURL(data[i])
            if (data[i].productSerialNumber != null && data[i].productSerialNumber.length > 0) {
                code = ' &bull; ' + data[i].productSerialNumber
            }

            html += '<li><div class="link"><a href="' + url + '">' + data[i].name + '</a></div><div class="location">' + type + code + '</div></li>'
        } else {
            url = getTradeDocumentURL(data[i])
            code = ' &bull; ' + data[i].documentId
            var title = getTradeDocumentTitle(data[i].documentId, data[i].tradeType)

            html += '<li><div class="link"><a href="' + url + '">' + title + '</a></div><div class="location">' + 'Trade' + code + '</div></li>'
        }
    }

    $('#search-results-list').html(html)
}

function getProductURL(item) {
    if (item.productId != null) {
        return '/html/product/details.html?id=' + item.productId
    } else {
        return '#'
    }
}

function getTradeDocumentURL(item) {
    if (item.documentId != null) {
        if (item.tradeType == 'ADD') {
            return '/html/trade/view_add.html?id=' + item.documentId
        }
        if (item.tradeType == 'SELL') {
            return '/html/trade/view_sell.html?id=' + item.documentId
        }
        if (item.tradeType == 'BUY') {
            return '/html/trade/view_buy.html?id=' + item.documentId
        }
        if (item.tradeType == 'WRITE_OFF') {
            return '/html/trade/view_write_off.html?id=' + item.documentId
        }
        if (item.tradeType == 'REFUND') {
            return '/html/trade/view_refund.html?id=' + item.documentId
        }
        if (item.tradeType == 'MOVE_IN' || item.tradeType == 'MOVE_OUT') {
            return '/html/trade/view_move.html?id=' + item.documentId
        }
        return '#'
    } else {
        return '#'
    }
}

Спасибо!

Answer 1

Неправильный обработчик ввода для поиска «изменить ключ копировать вставить вырезать».Удаление события «изменение» сделало трюк