Question

可以用这个吗？（代码 format 是混合的html jQuery，但仅用于解释。）

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

而不是:(检索所有图像组合）

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

最后将#result添加到所有匹配的图像中，如： carmageddon.png car.jpg red-car.jpg blue-car-micromachines.jpg car-yellow.gif

请记住，如果仅输入“黄色”以仅返回具有“黄色”的图像。

修改：简历：
如果在输入字段中键入名称，则可以动态地在页面上显示图像，但前提是输入的名称等于服务器上的图像名称。所以我的问题是：你只写了名称的一部分，jquery将所有与输入名称部分匹配的图像附加到页面。 ......任何想法？

任何建议都非常感谢！

Answer 1

您可以使用正则表达式。

我假设图像存储在数组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] +'">';
        }
    }
});

以后再加上文字;

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

但是在这里你必须注意陷阱，比如输入包含转义字符。你必须动态更换这些字符。

Answer 2

要完成您在编辑中阐明的内容，您必须拥有接受搜索字符串并返回匹配图像列表的服务器端代码。否则，客户端代码无法知道可以显示哪些图像。

例如，假设你的HTML是这样的：

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

（我已更改id; 强烈建议不要将“input”用作“id`”。）

使用jQuery的JavaScript可能如下所示：

(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}));
                            }
                        });
                    }
                });
            }
        });
    })();

（对于生产代码，我会把它分解为named functions并且有点偏执，但这只是一个简单的例子。）

您的服务器端searchpage（您必须使用您拥有的任何服务器端技术编写，例如PHP，Java，ASP.Net等等）将回复{{ 3}}（确保设置Content-Type: application/json标题）可能如下所示：

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

，例如，匹配的相对图像URL的数组。（我在回复中包含了搜索词，有时候我觉得很方便;实际上并没有在上面的代码中使用过。）

如何使用'〜='返回与输入的图像名称/文本部分匹配的图像

2 个答案: