Skip to content
Snippets Groups Projects
Commit c77d8500 authored by Bertrand NÉRON's avatar Bertrand NÉRON
Browse files

add field to request the database against the taxonomy 

this field have autocompletion feature

the results are remove when the user click on the input "by strain" or "by taxonomy" instead when they have the
focus to avoid a strange behavior. when the cursor go out the window and the last widget to have the focus
is "by strain" or "by taxonomy". when the mous comme back in the window the results were cleared.

add handler on "return press" event  on widget "by name", " by taxon id", "by strain" , "by taxonomy".
to trigger the request
parent 6be91c10
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/couchapp/secreton/_attachments/index.html
+ 83
− 15
View file @ c77d8500
......@@ -6,43 +6,47 @@
<link rel="stylesheet" href="style/tooltip.css" type="text/css">
<link rel="stylesheet" href="style/smoothness/jquery-ui-1.8.17.custom.css" type="text/css">
<script src="/_utils/script/jquery.js"></script>
<script src="/_utils/script/jquery.couch.js"></script>
<script src="/_utils/script/jquery-ui-1.8.11.custom.min.js"></script>
<!-- <script src="/_utils/script/jquery-ui-1.8.11.custom.min.js"></script>-->
<script src="script/jquery-ui-1.8.17.custom.min.js"></script>
</head>
<body>
<div id="request">
<form>
<fieldset>
<label for="nameSearch">by replicon name (ex:BUMA001c02)</label>
<input type="text" name="nameSearch" id="nameInput"/>
<select name="queryType" id="nameQueryType">
<option value="is" selected="selected">is</option>
<option value="start_with" >start_with</option>
<input type="text" name="nameSearch" id="nameInput" class="ui-widget ui-corner-all"/>
<select name="queryType" id="nameQueryType" class="ui-widget ui-corner-all ui-state-default">
<option value="is" selected="selected" class="ui-widget ui-corner-all ">is</option>
<option value="start_with" class="ui-widget ui-corner-all " >start_with</option>
</select>
<button type="button" id="nameButton">search by name</button>
</fieldset>
<fieldset>
<label for="taxidSearch">by replicon taxon id (ex:155864)</label>
<input type="text" name="taxidSearch" id="taxidInput"/>
<input type="text" name="taxidSearch" id="taxidInput" class="ui-widget ui-corner-all"/>
<button type="button" id="taxidButton">search by taxid</button>
</fieldset>
<fieldset>
<label for="famillySearch">by T3SS family</label>
<select name="familySearch" id="familyList">
<select name="familySearch" id="familyList" class="ui-widget ui-corner-all ui-state-default">
</select>
</fieldset>
<fieldset>
<label for="strainSearch">by strain</label>
<input type text="text" name="strainSearch" id="strainInput" size="100"/>
<input type text="text" name="strainSearch" id="strainInput" size="100" class="ui-widget ui-corner-all"/>
</fieldset>
<fieldset>
<label for="taxonomySearch">by taxonomy</label>
<input type text="text" name="taxonomySearch" id="taxonomyInput" size="50" class="ui-widget ui-corner-all"/>
</fieldset>
</form>
</div>
<div id="results"></div>
</body>
<script type="text/javascript">
$(".tooltip" , "#results").live('mouseenter', function(){
var link$ = $(this).find("a");
$(".tooltip a" , "#results").live('mouseenter', function(){
var link$ = $(this);
timer = setTimeout(function(){
var pos = link$.position();
var top = pos.top + link$.outerHeight(true)+3;
......@@ -51,7 +55,7 @@ $(".tooltip" , "#results").live('mouseenter', function(){
500);
}).live( 'mouseleave', function(){
clearTimeout(timer);
$(this).find("ul").hide(300)});
$(this).next().hide(300)});
</script>
<script type="text/javascript">
......@@ -77,13 +81,25 @@ $(".tooltip" , "#results").live('mouseenter', function(){
get_results( 'by_replicon_name', params);
});
$("#nameInput").keypress(function(event){
if(event.which == 13){
$("#nameButton").click();
}
});
$("#taxidButton").click( function(){
var params = {};
var key= $.trim($("#taxidInput").attr("value"));
if( key ){ params.key = key}
get_results( 'by_replicon_taxid', params);
});
$("#taxidInput").keypress(function(event){
if(event.which == 13){
$("#taxidButton").click();
}
});
$("#familyButton").click( function(){
var params = {};
var key= $.trim($("#familyInput").attr("value"));
......@@ -92,9 +108,9 @@ $(".tooltip" , "#results").live('mouseenter', function(){
});
$.getJSON( "_view/t3ss_family" , {group:true}, function(response){
var html = '<option value="">chose a T3SS Family</option>\n';
var html = '<option value="" class="ui-widget ui-corner-all ui-widget-content">chose a T3SS Family</option>\n';
for ( var i=0 ; i< response.rows.length ; i++){
html = html+'<option value="'+response.rows[i].key+'">'+response.rows[i].key+'</option>\n';
html = html+'<option value="'+response.rows[i].key+'" class="ui-widget ui-corner-all">'+response.rows[i].key+'</option>\n';
}
$("#familyList").html( html );
$("#familyList").change(function(event){
......@@ -103,6 +119,8 @@ $(".tooltip" , "#results").live('mouseenter', function(){
var params = {};
params.key='"'+opt_value+'"'
get_results( 'by_family', params );
}else{
$("#results div").remove();
}
});
});
......@@ -129,12 +147,62 @@ $(".tooltip" , "#results").live('mouseenter', function(){
},
minLength:3
});
$("#strainInput").click( function (evt){
$("#results div").remove();
});
$("#strainInput").keypress(function(event){
if(event.wich == 13){
strain= $(this).attr("value");
params = { key: '"'+strain+'"' };
get_results( 'by_replicon_strain', params);
}
});
$("#taxonomyInput").autocomplete({
source: function(req , response){
var term = '"'+req.term.toLowerCase()+'"';
var params= {
group:true,
startkey:'['+term+']',
endkey:'['+term+',{}]'
};
var suggestions =[];
$.getJSON("_view/taxonomy_terms", params , function(suggested_term){
for(var i =0; i<suggested_term.rows.length; i++){
suggestions.push(suggested_term.rows[i].key[1]);
}
response(suggestions);
});
},
select: function(evt , ui ){
term= ui.item.value ;
params = { key: '"'+term+'"' };
get_results( 'by_replicon_taxonomy', params);
},
minLength:3
});
$("#taxonomyInput").click( function (evt){
$("#results div").remove();
});
$("#taxonomyInput").keypress(function(event){
if(event.which == 13){
term= $(this).attr("value");
params = { key: '"'+term+'"' };
get_results( 'by_replicon_taxonomy', params);
}
});
$("#paginate .nav_page").live( 'click', function(){
var url = $(this).attr('data-href');
$("#results").load( url );
});
$(":button").button();
</script>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment