Пошук пропозицій html введення

Я насправді працюю над сайтом-проектом. За моїм веб-сайтом, у мене є база даних з рецептами.

Тепер на мою проблему: у верхній частині моєї сторінки є текстове поле, за допомогою якого можна буде шукати рецепти в базі даних. Моя база даних повертає наступний об'єкт JSON:

{"Data":{"Recipes":{"Recipe_7":{"ID":"7","TITLE":"Wurstel"},"Recipe_43":{"ID":"43","TITLE":"Wurstel2"}}},"Message":null,"Code":200}

Я вже проаналізував, що у мене є тільки заголовок:

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {
       var obj = jQuery.parseJSON(xmlhttp.responseText);
    var str="";
    $.each(obj.Data.Recipes, function(){
    str += this.ID + "
"; str += this.TITLE + "

"; }); document.getElementById("txtHint").innerHTML = str; document.getElementById("txtHint").style.border="1px solid #A5ACB2"; }

Те, що я зараз не знаю, - це написати рядок str у випадаюче меню під текстове поле пошуку. Що це за елемент?

2
Це елемент select ?
додано Автор alex, джерело
Оскільки ви використовуєте jQuery, ви можете просто вибрати елемент за допомогою селектора CSS (тобто: $ ("# txtHint")), а потім викликати функції на елементі DOM, який повернув jQuery.
додано Автор Connor, джерело
Спробуйте уникати .innerHTML . Це зло.
додано Автор Raynos, джерело
Див це jqueryui.com/demos/autocomplete/#remote-jsonp , це отримує віддалені дані json та додає до пропозиції .. Я думаю, що це може вам допомогти.
додано Автор Vijay, джерело
Ні, спадне меню має відображатися, коли я шукаю щось. Функція, яку я можу шукати "live", вже написана, я просто не знаю, як цей елемент викликається
додано Автор Harald, джерело

2 Відповіді

Ось чудовий приклад! На сторінці Школи W3 , так що є весь код, який вам потрібно буде отримати, щоб працювати для вашого проект!

Я сподіваюсь, це допоможе вам :)

5
додано
Цей приклад, який ви пов'язуєте, насичений поганим кодом та поганими практиками. Будь ласка, не подобається w3schools.
додано Автор Raynos, джерело
Я знаю, рішення не погано або що-небудь. Я просто даю вам знати, що посилання на W3Schools не добре. Це просто розповсюдження поінформованості про те, як W3Schools не оновлюють його вміст, і це може іноді вводити в оману.
додано Автор Some Guy, джерело
Це тверде рішення. Незалежно від того, який "сайт" його на. Ваша публікація не є конструктивною для ОП.
додано Автор Graeme Leighfield, джерело
В ПОРЯДКУ. Спасибі Аману :)
додано Автор Graeme Leighfield, джерело
навряд чи варто знизити голосування. він відповідає на питання плакатів і надає йому посилання, де йти і продовжити свій проект. Ні, де я казав: "Це абсолютний код 100%, який вам потрібно використовувати".
додано Автор Graeme Leighfield, джерело

спробуйте скористатись https://github.com/httpcart/SuggestionsAndSearchJs Все працює в одному рядку

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram