Динамический автоматический выбор, изменение изображения в другом месте

Question

Это только я думаю о том, чтобы потрясти мирское поле ввода.

Хорошо, у нас есть элемент ввода, и мы предварительно распространили небольшую таблицу базы данных с идентификатором, именем и именем изображения

Так вот о чем я думаю.

У нас есть элемент ввода, с которого пользователь начинает печатать. Допустим, APPL ...

В раскрывающемся списке (для всплывающих подсказок предлагается автоматическое предложение) с помощью APPLE, они выбирают APPLE, а в другом элементе div в другом месте страницы отображается изображение div.

Точно так же, если они выбирают банан, аналогично banana.png показывает в этом разделе.

Хорошо, так что у нас теперь есть.

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

У меня работает элемент ввода, и они могут выбирать из предложенных вариантов.

Что я не могу понять, так это как использовать (возможно, ajax, я полагаю) хмм ... или другой метод, способ показа изображения в другом месте, который отражает сделанный ими выбор.

Чтобы было проще.

Все автозаполнения совпадают с именем файла изображения, поэтому:

APPLE становится apple.png Торт становится торт.php

Я уверен, что Дж.С. может помочь здесь. Просто не уверен как. Я бы подумал getElementById

Anyhoo .. иногда, задавая вопрос, можно вызвать ответ от кого-то, кто сделал что-то подобное.

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

Но для простоты давайте возьмем метод выбора поля:

<select id="fruit" name="fruit">
                                <option value="">Please select a Fruit</option>
                                <option value="apple">Apple</option>
                                <option value="cake">Cake</option>
                            </select>

В настоящее время Auto Suggest, Auto complete выглядит следующим образом:

<div class="field"><label for="fruit">Pick a Fruit </label> 

Любая помощь приветствуется ...

Answer 1

Вы можете сделать это легко с помощью jQuery. Скопируйте приведенный ниже пример кода и вставьте его между тегами body html-файла. Замените значения параметров элемента "myselector" своими собственными. При выборе элемента в раскрывающемся меню изображение будет динамически изменяться.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
$(function() {
    $("#myselector").change(function() { // Assign a handler.
        if ($("#myselector").val() != '') {
            $("#myimage").attr('src', $("#myselector").val()); // Change the image.
        }
    });
});
</script>

<select name="myselector" id="myselector">
    <option value="">Select Image</option>
    <option value="http://www.gravatar.com/avatar/e2f0c2f013205c397a7b00bc3012a027?s=32&d=identicon&r=PG">Image 1</option>
    <option value="http://www.gravatar.com/avatar/06383b51463f855d7cc0f07d4566bd42?s=32&d=identicon&r=PG">Image 2</option>
</select>

<img name="myimage" id="myimage" src="http://www.gravatar.com/avatar/c259fe3371bba238ad95021e67741e9c?s=32&d=identicon&r=PG" />

Answer 2

Добавьте изображение на свою страницу:

<img src="default.jpg" id="result_image" />

Когда ваш код автозаполнения заполнит текст, измените изображение также

document.getElementById('result_image').src = autocompleted_text + ".jpg";