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.