Ensure browse buttons clear input text

On the machines/distros/classes pages, if you type a keyword and then
click "search", and there are no matches, then you click on "browse",
there shouldn't be any search text in the box anymore because you're
viewing all items, so use a bit of javascript to ensure that.

While I'm at it, set reasonable ids for the search field on each page
(including the recipes page, although there is no browse button there so
that is just for consistency).

Signed-off-by: Paul Eggleton <paul.eggleton@linux.intel.com>
This commit is contained in:
Paul Eggleton 2018-09-26 16:31:26 +12:00
parent a4212901b1
commit 6fcf44fcc7
4 changed files with 20 additions and 8 deletions

View File

@ -33,10 +33,10 @@
<div class="bottom-margin">
<form id="filter-form" action="{% url 'class_search' url_branch %}" method="get">
<div class="input-group col-md-6">
<input type="text" class="form-control" id="appendedInputButtons" placeholder="Search classes" name="q" value="{{ search_keyword }}" />
<input type="text" class="form-control" id="id_search_text" placeholder="Search classes" name="q" value="{{ search_keyword }}" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit" name="search" value="1">search</button>
<button class="btn btn-default" type="submit" name="browse" value="1">browse</button>
<button class="btn btn-default" type="submit" name="browse" value="1" id="id_browse_btn">browse</button>
</div>
</div>
</form>
@ -84,5 +84,9 @@
$("#filter-form input:text").first().select().focus();
});
{% endif %}
$("#id_browse_btn").click(function() {
$("#id_search_text").val("");
});
</script>
{% endblock %}

View File

@ -34,10 +34,10 @@
<div class="bottom-margin">
<form id="filter-form" action="{% url 'distro_search' url_branch %}" method="get">
<div class="input-group col-md-6">
<input type="text" class="form-control" id="appendedInputButtons" placeholder="Search distros" name="q" value="{{ search_keyword }}" />
<input type="text" class="form-control" id="id_search_text" placeholder="Search distros" name="q" value="{{ search_keyword }}" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit" name="search" value="1">search</button>
<button class="btn btn-default" type="submit" name="browse" value="1">browse</button>
<button class="btn btn-default" type="submit" name="browse" value="1" id="id_browse_btn">browse</button>
</div>
</div>
</form>
@ -87,5 +87,9 @@
$("#filter-form input:text").first().select().focus();
});
{% endif %}
$("#id_browse_btn").click(function() {
$("#id_search_text").val("");
});
</script>
{% endblock %}

View File

@ -33,10 +33,10 @@
<div class="bottom-margin">
<form id="filter-form" action="{% url 'machine_search' url_branch %}" method="get">
<div class="input-group col-md-6">
<input type="text" class="form-control" id="appendedInputButtons" placeholder="Search machines" name="q" value="{{ search_keyword }}" />
<input type="text" class="form-control" id="id_search_text" placeholder="Search machines" name="q" value="{{ search_keyword }}" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit" name="search" value="1">search</button>
<button class="btn btn-default" type="submit" name="browse" value="1">browse</button>
<button class="btn btn-default" type="submit" name="browse" value="1" id="id_browse_btn">browse</button>
</div>
</div>
</form>
@ -86,5 +86,9 @@
$("#filter-form input:text").first().select().focus();
});
{% endif %}
$("#id_browse_btn").click(function() {
$("#id_search_text").val("");
});
</script>
{% endblock %}

View File

@ -35,7 +35,7 @@
<div class="form-group" id="searchfield">
<div class="controls">
<div class="input-group col-md-6">
<input type="text" class="form-control" id="appendedInputButtons" placeholder="Search recipes" name="q" value="{{ search_keyword }}" />
<input type="text" class="form-control" id="id_search_text" placeholder="Search recipes" name="q" value="{{ search_keyword }}" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit">search</button>
</div>
@ -97,7 +97,7 @@
});
function validate(){
if (!$("#appendedInputButtons").val()){
if (!$("#id_search_text").val()){
$("#errortext").html("<p>Please specify search text</p>");
$("#searchfield").addClass("has-error");
return false;