从数据库中进行下拉搜索，获取不同型号/品牌的图像并显示

Question

My problem is to display an image that is associated with the mysql results... Say the result has ID=250 and Name=brand.model, then I want a piece of code to search in a folder for an image with the name id_brand.model.jpg on the server.

Database structure is id, master, name. When user selects Brand + Model from dropdown it should get image from folder (could also get image from database, which one is better nowadays) and images all have unique name's what should be echoed as part name.

(Pictures to help understanding what i mean http://imgur.com/a/7XwVd )

Here's pastebin's to what i have coded yet. http://pastebin.com/kQF2qP64

Any help is appreciated.

Answer 1

First you need to bind the change event of the select to send the name to a function to search the file, then append the file/s to the DOM:

Javascript (Ajax)

// Every time a category is selected we request the files
$('#category').on('change', function() {
    // If we have an element with images loaded, lets delete it
    var searchResult = $("#search-result").empty();
    // Now we serialize the form data, add an id to the form
    var searchBrand = $('#gender').find('option:selected').text();
    var searchModel = $('#category').find('option:selected').text();
    var fileName = searchBrand + '.' + searchModel + '.jpg';
    var searchData = { filename: fileName }
    // Now we create the ajax request with the form data
    var request = $.getJSON('search_images.php', searchData);
    // If the request success we show the images
    request.done(function(data) {
        // For each image found we add a new image to the DOM
        $.each(data, function(index, image_uri) {
            // First let's create the image element
            var img = $("<img>", {
                "class": "result-image",
                "src": image_uri
            });
            // Then we append it to the DOM
            searchResult.append( img );
        });
    });
    // If the search fails, we notify that no results were found
    request.fails(function() {
        alert('No results found');
    });
});

PHP (search_images.php)

<?
// Get the file name
$filename = $_GET['filename'];
// Find all the images
$images = glob("images/file/path/*_{$filename}");
// Return the images as json
echo json_encode($images);