Reduce jQuery append method

Question

Is this the simplest way to write this? This code evaluates if a textbox value exceeds 20 characters, and then displays the proper message (essentially truncating the string and then adding an ellipses to the end.)

I've tried using a tertiary operator but doesn't seem to work with appending data to an element as it overwrites what was previously appended.)

if (searchBoxValue.length > numCharToDisplay) {
    searchDropDown.append('<div class="noresults"><span>Searching "' +
    searchBoxValue.trim().substring(0, numCharToDisplay) +
    '..." Found No Results</span></div>');
} else {
    searchDropDown.append('<div class="noresults"><span>Searching "' +
    searchBoxValue.trim() + '" Found No Results</span></div>');
}

Answer 1

While I agree with Tiago Marinho, I believe that this could be taken a step further.

---

Look at both your appends: that are appending the exact same string. Therefore, we can just store this in a variable:

var text = "<div class='noresults'></span>Search '";

---

I disagree with Tiago Marinho's point about ternary operators, however. I don't believe that it will have any negative impact on your code.

With good formatting, this can actually make your code look rather nice, in my opinion:

var trimmedSearch = searchBoxValue.length > numCharToDisplay ?
                    searchBoxValue.trim().substring(0, numCharToDisplay)  + "...'":
                    searchBoxValue.trim();

---

All that's left is adding the final "Found No Results" string. Here is the entire code now.

var text = "<div class='noresults'></span>Search '";
var trimmedSearch = searchBoxValue.length > numCharToDisplay ?
                    searchBoxValue.trim().substring(0, numCharToDisplay) + "...'":
                    searchBoxValue.trim();

searchDropDown.append(text + trimmedSearch + "' Found no results</span></div";

Answer 2

Instead of writing append two times, why don't append a single time with two different values depending on the length of searchBox?

Also, moving the trimmed search value into a variable simplifies the code a bit.

var text,
    trimmedSearch = searchBoxValue.trim();
if (searchBoxValue.length > numCharToDisplay) {
    text = '<div class="noresults"><span>Searching "' +
    trimmedSearch.substring(0, numCharToDisplay) +
    '..." Found No Results</span></div>';
} else {
    text = '<div class="noresults"><span>Searching "' +
    trimmedSearch + '" Found No Results</span></div>';
}
searchDropDown.append(text);

Using ternary operators, as you suggested, wouldn't be a good practice since it complicates things up, leaving maintenance really difficult.