Search jQuery

jQuery Forum

Customize data-filter-placeholder

in jQuery Mobile • 10 years ago

Can the attribute data-filter-placeholder be customized? I've been wanting to have that change based on a filter that is selected.

So placeholder defaults to "search", but if they select Location from the filter list, I'd like it to change to "Search Location". I tried something like below but, obviously, it's a greasefire. Has anyone ever attempted this?

Thanks,
Shadraq

$("#filterButton").click(function () {
$("#searchResults").change(function(){
$(this).data-filter-placeholder("Search Location");
});
});

Replies(5)

watusiware

Re: Customize data-filter-placeholder

10 years ago

data-filter-placeholder just sets the placeholder attribute on the input field that is used for the search.

If you want to change it later, just change the attribute.

Something like:

$(".searchResults").change(function() {
var $searchResults = $(this);
$searchResults.attr("placeholder", "Search Location");
}

Not sure what you're trying to do above with the change callback setup inside the click callback. That's another issue.

TheShadraq

Re: Customize data-filter-placeholder

10 years ago

Thanks for weighing in. I guess I was just coming up with a use case to keep it simple. Turns out it wasn't such a good idea. To keep it fully simple, I just want to change the attribute when a filter is selected.

TheShadraq

Re: Customize data-filter-placeholder

10 years ago

Ok so after working a bit I came up with this:

<ul id="searchBox" data-role="listview" class="listResults searchSide" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search">
<some li's>
</ul>
<script type="text/javascript">
//the function is called somewhere else ... below is the function
function changePlaceholderText(passedID) {
var theID = passedID;
var newPlaceholder = null;
if (theID == "navTabsBldgContactInfo") { newPlaceholder = "Building Contact Search"; }
else if (theID == "navTabsPeople") { newPlaceholder = "People Search"; }
else { newPlaceholder = ""; }
$("#searchBox").listview("option", "placeholder", newPlaceholder);
}
</script>

Based on alert() placement, I've determined that:
1. var theID is passing correctly
2. var newPlaceholder is being set correctly
3, running an alert at the end like (below) shows that everything is set correctly. However, the HTML on the screen still reflects the old data-filter-placeholder text .

var filterPlaceholder = $("#searchBox").listview("option", "filterPlaceholder");
alert(filterPlaceholder);

Any help you have would be appreciated. I'm afraid I'm stuck.

watusiware

Re: Customize data-filter-placeholder

10 years ago

You're making this too complicated.

This is simply an HTML attribute. No magic about it. Use .attr() to set it.

data-filter-placeholder simply initializes the real placeholder attribute during page initialization. If you change it later, it will have no effect. data- attributes are (in general) only used by JQM at page initialization. The reason it exists is because otherwise there is no place for you to put the placeholder in your markup, because JQM actually creates the input element for you during listview initialization. You can't set an attribute on an element that doesn't exist! So, JQM gives you a way to specify the placeholder in the listview markup.

Of course, you'll need a selector that targets the filter input element. And that is a bit tricky. JQM creates a form and places it just before your listview.

$("#searchBox).prev().find(".ui-input-search .ui-input-text").attr("placeholder", newPlaceholder);

.prev() selects the element immediately preceeding the listview, which is the search form that JQM inserted into the page. .find() finds the text input element inside that form. Then you simply set the placeholder attribute.

If you aren't using Web Inspector, Firebug, etc. you should. Then you can look at the DOM and figure out where JQM has put things in your page.

TheShadraq

Re: Customize data-filter-placeholder

10 years ago

Thanks for the patience and the great explanation. That helped a bunch. I do use Firebug, but haven't explored its uses beyond errors. I will have to look deeper into it.

Again, I appreciate your patience. Your mini-tutorial was a great help.

Top Reply

Response title

Attachments

jQuery Forum

Customize data-filter-placeholder

Replies(5)

Re: Customize data-filter-placeholder

Re: Customize data-filter-placeholder

Re: Customize data-filter-placeholder

Re: Customize data-filter-placeholder

Re: Customize data-filter-placeholder

Statistics

Tags

Actions