Nano Hash - криптовалюты, майнинг, программирование

Как отформатировать ответ автозаполнения JQueryUI?

Я пытаюсь создать виджет автозаполнения, который будет отображать имя и краткое описание соответствующего элемента.

Например, если я наберу «Америка», появится «Северная Америка — северный субконтинент Америки». и «Южная Америка — южный субконтинент Америки».

Я успешно сделал это, поэтому моя база данных вернет соответствующий ответ JSON с идентификатором, значением (имя элемента, например, Северная Америка, и описание (краткое описание, например, «Северный субконтинент...»)), мне просто нужна помощь форматировать возвращаемые результаты как

<li><strong>value<strong><br><p>desc</p></li>

вместо того, чтобы просто

<li>value</li>

Заранее большое спасибо.

P.S. Я пытался найти ответ на Stack Overflow, но ответы, которые я нашел, включают formatResult и другие методы, которые больше не поддерживаются.

jquery autocomplete jquery-ui jquery-autocomplete
03.09.2011

Ответы:


1

http://jqueryui.com/demos/autocomplete/#custom-data — это пример пользовательских данных на сайте пользовательского интерфейса jquery, чего вы пытаетесь достичь?

03.09.2011
  • Спасибо. Кажется, это именно то, что я ищу. Я дам вам знать, если это сработает. 04.09.2011

    • 2

    это может помочь, посмотрите на .data():

    $( "#project" ).autocomplete({
        minLength: 0,
        source: projects,
        focus: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            $( "#project-id" ).val( ui.item.value );
            $( "#project-description" ).html( ui.item.desc );
            $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

            return false;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
            .appendTo( ul );
    };
    03.09.2011

    3

    Вы должны быть в состоянии использовать следующее регулярное выражение для достижения результата, который вы ищете.

    item.label.replace(new RegExp('(' + term + ')', 'ig'), function ($1, match) {
     return '<strong>' + match + '</strong>';
});

    Полный пример ниже.

    $("#project").autocomplete({
            minLength: 0,
            source: projects,
            focus: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                $( "#project-id" ).val( ui.item.value );
                $( "#project-description" ).html( ui.item.desc );
                $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

                return false;
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            var term = this.term,
                        formattedLabel = item.label.replace(new RegExp('(' + term + ')', 'ig'), function ($1, match) {
                            return '<strong>' + match + '</strong>';
                        });
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + formattedLabel + "<br>" + item.desc + "</a>" )
                .appendTo( ul );
        };
    11.10.2012
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..