I am not winning in my effort to use select2. I need a tool that can
select mulitlple entries in what would be a straight forward IS_IN_DB()
situation except that it must be able to handle lists of up to 300000
entries.
>From what I have read about select2 it might be the correct tool, and
somebody on this list mentioned that it easy to implement. Well, not to me.
I have the following view
{{
response.files.append(URL('static','css/select2.css'))
response.files.append(URL('static', 'js/select2.min.js'))
}}
{{extend 'layout.html'}}
{{=form.custom.begin}}
<div>
Journal name:
<div id="e7" multiple="true">
{{=form.custom.widget.journal_title}}
</div>
{{=form.custom.submit}}
</div>
{{=form.custom.end}}
<script>
$(document).ready(function(){
$("#e7").select2({
placeholder: "Search for journal titles",
minimumInputLength: 2,
id:function(e){return e.uuid},
ajax: {
url: "{{=URL(r = request, c = 'journal', f= 'toets_select')}}",
type: 'POST',
dataType: 'json',
quietMillis: 100,
multiple : "true",
data: function (term, page) { // page is the one-based page number
tracked by Select2
return {q: term, //search term
page_limit: 10, // page size
page: page, // page number
};
},
results: function (data, page) {
console.log(data)
var more = (page * 10) < data.total; // whether or not
there are more results available
// notice we return the value of more so Select2 knows if
more results can be loaded
return {results: data, more: more};
}
},
formatResult: function (data) {return city.uuid;},
formatSelection: function(data){return data.title},
formatNoMatches:function() { return 'Nothing found'},
dropdownCssClass: "bigdrop" // apply css that makes the dropdown
taller
}); });
</script>
This code succeeds in querying the server with the correct query and the
server answers with something like:
[{"uuid": "7aa85c64-df7e-44d7-a956-6394c9d2f46a", "title": "MEDICAL
HISTORY"}, {"uuid": "f53d1cce-9425-4c03-8207-2c8f515f80c9", "title":
"MEDICAL HYPOTHESES"}, {"uuid": "f5c07b97-4c78-47b6-a356-30196e3dbff2",
"title": "MEDICAL IMAGE ANALYSIS"}, {"uuid":
"a8d4e6dc-d885-446d-82f5-630d5ca5d586", "title": "MEDICAL JOURNAL OF
AUSTRALIA"}, {"uuid": "d05a9529-98e5-4ffd-a133-49c35e276c58", "title":
"MEDICAL JOURNAL OF ZAMBIA"}, {"uuid":
"cc8eb772-3b89-430b-b7e8-14a94bb29714", "title": "MEDICAL LABORATORY
SCIENCES"}, {"uuid": "f19f8128-45e3-4fa5-9ce3-1e2e5cd2458e", "title":
"MEDICAL LAW REVIEW"}, {"uuid": "25837a66-c70a-4a9f-adae-94a9708403a2",
"title": "MEDICAL MICROBIOLOGY AND IMMUNOLOGY"}, {"uuid":
"65dbe681-6c54-4c5c-b84d-63882a51361a", "title": "MEDICAL MICROBIOLOGY
LETTERS"}, {"uuid": "f75a57d8-29c1-49b3-a33d-b64374171e08", "title":
"MEDICAL MYCOLOGY"}]
where the word 'medical' was typed into the search box.
But nothing of this result appears in the view and firebug shows
[11:56:01.426] Empty string passed to getElementById(). @
http://localhost:8000/init/static/js/jquery.js:2
when the user starts to type something in the search box. I don't know
whether this is the problem or what causes it.
If someone has a working example using this library, I would appreciate
some help.
Or is there another, more straightforward way to do this?
Regards.
Johann
--
