Как сгенерировать ссылки в div?

Question

[karasique]

Возвращаю из autocomplete несколько значений вида ui.item.value1-value10, как мне записать такие ссылки в div?
<a onclick='addPrice(ui.item.valueX)'>add</a>
В элемент: <div id="hintPrice"></p>

Сейчас вывожу так, но не разобрался, как добавить <a>

function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#hintPrice" );
    }

Answer 1

[Сергей Соколов]

Вторым параметром можно передать объект свойств-событий-методов:

$("<a>", {
    href: "#",
    onclick: () => addPrice(ui.item.valueX),
    title: "add"
}).prependTo( "#hintPrice" );

Comments

[karasique]

А как мне перебрать все 10 значений valueX ?

[Сергей Соколов]

karasique, приведите пример кода, в каком виде они приходят?

[Сергей Соколов]

let i = 1;
while( ui.item.hasOwnProperty('value' + i)) {
  $("<a>", {
      href: "#",
      onclick: () => addPrice(ui.item["value" + i]),
      title: "add"
  }).prependTo( "#hintPrice" );
  i++:
}

[karasique]

Сергей Соколов, вот весь js на странице:

<script type="text/javascript">
                function log( message ) {
                    $( "<div>" ).text( message ).prependTo( "#hintPrice" );
                }
                function addPrice(price) {
                    $('#price').val(price);
                }
                function newService(){
                    document.getElementById("hintPrices").classList.add('hidden');
                    $('#service').val("");
                    $( "#service" ).prop( "disabled", false );
                }


                $().ready(function() {
                    $('#addCar').validate();
                });
                console.log($('#autorepair').val());
                $( function() {
                    $( "#service" ).autocomplete({
                        source: "newJob-search.php?data=<?=$autorepairData['departmentID']?>",
                        minLength: 2,
                        select: function( event, ui ) {
                            $('#service').val(ui.item.label);
                            $( "#service" ).prop( "disabled", true );
                            $('#serviceID').text(ui.item.value1);
                            $('#hintPrice').val(ui.item.label);
                            document.getElementById("hintPrices").classList.remove('hidden');
                            $("#hintPrice").html('<a onclick="ui.item.value1">ui.item.value1</a>')
                        }
                    });
                } );
            </script>

Вот мой обработчик php: https://pastebin.com/zMUXEUky

[karasique]

Сергей Соколов, не подскажете, как адаптировать ваш код к моему случаю, пожалуйста?

[Сергей Соколов]

karasique, что именно у вас вызывает затруднение?

[Сергей Соколов]

Кстати, в обработчике у вас адок. Введённый параметр прямо подставляется в запрос – привет, SQL-инъекции. (используйте PDO и подстановку параметров)
SELECT забирает все найденные результаты, хотя дальше код берет не более 10 значений. (добавьте LIMIT 10)

[karasique]

Сергей Соколов, я добавил ваш код после

document.getElementById("hintPrices").classList.remove('hidden');

- не работает, ошибок не выдает

[karasique]

Сергей Соколов, возможна ли sql-инъекция, если я вставляю значение через плейсхолдер, который принимает только цифры?

[Сергей Соколов]

karasique, возможна. С клиента может прийти всё, что угодно, самый зловредный код. Проверять и фильтровать надо на бэке.

[karasique]

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

[Сергей Соколов]

как я понял, autocomplete не ждёт от вас генерации элементов. Бэкенд должен вернуть JSON с массивом объектов. У каждого 2 свойства: "label" и "value". Сейчас ваш бэк возвращает ответ не в таком формате.

[karasique]

Сергей Соколов, ну, в том формате, что он возвращал, я спокойно заполнял input всеми value

[karasique]

Сергей Соколов, я знаю, что не ждет генерации элементов, просто хотел вывести в div подсказки

[Сергей Соколов]

karasique, учитесь отлаживать код. Дебаггером, или в консоль выбрасывайте значения, смотрите. Что там в ui приходит вообще? – после classList.remove('hidden') допишите console.log(ui);

[karasique]

Сергей Соколов,

[Сергей Соколов]

$("#hintPrice").html('<a onclick="ui.item.value1">ui.item.value1</a>')

А вот эта строчка осталась там на последнем месте?

Покажите целиком код с моим while()

[karasique]

Сергей Соколов, не осталось. https://pastebin.com/80DSbyYJ

[karasique]

Сергей Соколов, можете посмотреть, пожалуйста?