Question

我正在构建自动填充功能，现在我正在尝试以列出的搜索结果的名义突出显示搜索字符串，但我似乎甚至无法替换某些搜索字符串原因。我单独尝试过，它不起作用，我不明白为什么。

这是创建结果html元素的函数：

jQuery( function() {

        var searchString = "";

        var categoryListElement = jQuery('#SearchResults .categories .list');
        var productListElement = jQuery('#SearchResults .products .list');

        function trimSearchResults(resultObject){
            var categories = resultObject.data.categories.slice(0,5);
            var products = resultObject.data.products.slice(0,5);

            return {'categories' : categories, 'products' : products};
        }

        function populateSearchResults(listData, targetListElement) {

            if (listData.length == 0)
                targetListElement.parent().hide();
            else
                targetListElement.parent().show();

            function createCategoryElement(categoryElementObject) {

                console.log(categoryElementObject.name);

                var nameHighlight = categoryElementObject.name;
                nameHighlight.replace(searchString, "kakakakak");

                console.log(nameHighlight);

                var element = jQuery("<li>" +
                    "<a href=" +  categoryElementObject.url + ">" +
                        "<img src='/images/" + categoryElementObject.image + "'>" +
                        "<span>" + categoryElementObject.name + "</span>" +
                    "</a>" +
                "</li>");

                return element;
            }

            targetListElement.empty();

            listData.forEach(function(item, index){
                targetListElement.append(createCategoryElement(item));
            });

        }

        jQuery("#SearchInputs input").on('input', function(){
            searchString = jQuery(this).val();

            if (searchString.length >= 2)
            {
                jQuery.get(
                    "http://www.theperfecturn.com/search?keywords=" + searchString,
                    function(response){
                        console.log(trimSearchResults(response));
                        var trimmedResults = trimSearchResults(response);
                        populateSearchResults(trimmedResults.categories, categoryListElement);
                        populateSearchResults(trimmedResults.products, productListElement);

                        jQuery("#SearchResults").show();
                    }
                );
            }
        });

        jQuery("#SearchInputs input").on('blur', function(){
            jQuery("#SearchResults").hide();
        });

} );

和HTML：

        <div id="SearchInputsHolder" class="col-4">
            <div id="SearchInputs" class="input-group input-group-sm">
                <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
                <span class="input-group-btn">
                    <button class="btn btn-standard" type="button">Go</button>
                </span>
            </div>

            <div id="SearchResults" class="hidden">

                <div class="categories">
                    <div class="header">Categories</div>
                    <ul class="list"></ul>
                    <div class="all-results-link"></div>
                </div>

                <div class="products">
                    <div class="header">Products</div>
                    <ul class="list"></ul>
                    <div class="all-results-link"></div>
                </div>

            </div>
        </div>

Answer 1

你的searchString变量在哪里声明。因为在替换时你没有给出任何输入字符串..我认为你应该在searchString变量中分配你要替换的文本。然后它会起作用

Answer 2

你应该分配 var something = nameHighlight.replace（searchString，＆＃34; kakakakak＆＃34;）; 替换字符串名称时。之后你可以使用被替换的字符串变量＆＃39; something＆＃39;在元素绑定中。这就是您的替换无效的原因。我认为这是解决的问题。

如何用HTML元素替换字符串？

2 个答案: