how to use '~=' to return images that partially match an entered image name / text

Is possible to use this? (the code format is mixed html jQuery, but just for explanation.)

<input id="input" type="text" value="" /> // the entered text: 'car'
var text= $('#input').text();  // is taken by jquery...

And than something like: (to retrieve all combinations of images)

<div id="results"></div> // the area inside body...
$('#results').append('<img src~="'+ text +'"'); 开发者_开发问答// the ~ ! (I'm missing some kind of loop here...)

And finally append to #result all the matched images like: carmageddon.png car.jpg red-car.jpg blue-car-micromachines.jpg car-yellow.gif

Having in mind that if entered only 'yellow' to return only the images that have 'yellow'.

EDIT: Resume:

if you type into an input field a name, you can dynamically make appear an image on page, but only if the entered name is equal to the image name on the server. So my question was: you write only a part of the name, and jquery appends to the page all images that partially match the entered name. ... any idea?

any suggestion is greatly appreciated!

To do what you've clarified in the edit, you'll have to have server-side code that accepts the search string and returns a list of matching images. Otherwise, there's no way for the client-side code to know what images are available to be shown.

For example, suppose your HTML is this:

<input id="imageSearch" type="text" value="" />

(I've changed the id; strongly recommend not using "input" as an `id``.)

Your JavaScript using jQuery might look like this:

(function() {                // Scoping function to avoid globals
    var currentSearch;

    $("#imageSearch").change(function() {
        var val = $(this).val(); // `val()`, not `text()`
        if (val.length > 2) {    // Or whatever
            // Start a search
            currentSearch = val;
            $.ajax({
                url: "searchpage",
                data: {search: val},
                success: function(data) {
                    var results;

                    // Is this still the current search?
                    // (Remember that network operations may
                    // be chaotic, if the user types another
                    // char you might get the response to your
                    // next call before your response to an
                    // earlier one. Unlikely, but it does happen.)
                    if (val === currentSearch) {
                        // Still current, show results if any
                        results = $("#results");
                        $.each(data.images, function(index, imgurl) {
                            // Already showing this image?
                            if (!results.find("img[src='" + imgurl + "']")[0]) {
                                // No, show it
                                results.append($("<img/>", {src: imgurl}));
                            }
                        });
                    }
                });
            }
        });
    })();

(For production code, I'd break that up into named functions and be a bit more paranoid, but this is just a quick example.)

Your server-side searchpage (which you'll have to write with whatever server-side technology you have, e.g., PHP, Java, ASP.Net, etc., etc.) would reply with JSON (being sure to set the Content-Type: application/json header) which might look like this:

{
    "search": "car",
    "images": [
       "carmageddon.png",
       "car.jpg",
       "red-car.jpg",
       "blue-car-micromachines.jpg",
       "car-yellow.gif"
    ]
}

E.g., an array of matching relative image URLs. (I included the search term in the reply, which I find handy sometimes; not actually used in the code above.)

You can use Regular Expression for that.

I am assuming that the images are stored in an Array imgs.

var appendText;
var myReg = '/('+ $('#input').text() +')+/g';
$('#myButton').click(function(){
    foreach( i in imgs ){
        if( myReg.match( imgs[i] ) ){
            appendText += '<img src="'+ imgs[i] +'">';
        }
    }
});

and later on you can append the text;

$('#results').append( appendText );

But here you have to watch out for the pitfalls like what if the input contains the escape characters. you have to replace these characters on the fly.