浏览代码

[search] Autocomplete add a widget field input

Romain Rigaux 11 年之前
父节点
当前提交
57d487b
共有 2 个文件被更改,包括 35 次插入14 次删除
  1. 17 4
      apps/search/src/search/templates/search2.mako
  2. 18 10
      apps/search/static/js/search.ko.js

+ 17 - 4
apps/search/src/search/templates/search2.mako

@@ -718,8 +718,8 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
   </div>
   <div class="modal-body">
     <p>
-      <input type="text" data-bind="value: $root.collection.template.fieldsModalFilter, valueUpdate:'afterkeydown'" 
-          placeholder="${_('Filter fields')}" class="input-xlarge" />
+      <input id="addFacetInput" type="text" data-bind="value: $root.collection.template.fieldsModalFilter, valueUpdate:'afterkeydown'"
+       placeholder="${_('Filter fields')}" class="input-xlarge" />
       <ul data-bind="foreach: $root.collection.template.filteredFieldsAttributes().sort(function (l, r) { return l.name() > r.name() ? 1 : -1 })"
           class="unstyled inline fields-chooser">
         <li data-bind="click: addFacetDemiModalFieldClick">
@@ -732,6 +732,12 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
       </div>
     </p>
   </div>
+  <div class="modal-footer">
+    <div>
+      <input type="button" class="btn disabled" data-dismiss="modal" value="${_('Pick!')}" />
+      <input type="button" class="btn" data-dismiss="modal" value="${_('Cancel')}" />
+    </div>
+  </div>  
 </div>
 
 
@@ -1231,10 +1237,17 @@ $(document).ready(function () {
 
   var selectedWidget = null;
   function showAddFacetDemiModal(widget) {
-    if (["resultset-widget", "html-resultset-widget", "filter-widget"].indexOf(widget.widgetType()) == -1) {
+    if (["resultset-widget", "html-resultset-widget", "filter-widget"].indexOf(widget.widgetType()) == -1) {      
       viewModel.collection.template.fieldsModalFilter();
       viewModel.collection.template.fieldsModalType(widget.widgetType());
-      viewModel.collection.template.fieldsModalFilter("");      
+      viewModel.collection.template.fieldsModalFilter("");
+      $('#addFacetInput').typeahead({
+          'source': viewModel.collection.template.availableWidgetFieldsNames(), 
+          'updater': function(item) {
+              addFacetDemiModalFieldClick({'name': function(){return item}});
+              return item;
+           }
+      });
       selectedWidget = widget;
       $("#addFacetDemiModal").modal("show");
       $("#addFacetDemiModal input[type='text']").focus();

+ 18 - 10
apps/search/static/js/search.ko.js

@@ -223,18 +223,18 @@ var Query = function (vm, query) {
 
   self.getMultiq = ko.computed(function () {
     if (self.selectedMultiq()) {
-    if (self.selectedMultiq() == 'query') {
-      if (self.qs().length >= 2) {
-        return 'query';
-      }
-      } else {
-        var facet = self.getFacetFilter(self.selectedMultiq());
-        if (facet && facet.filter().length > 0) { // todo + histogram there?
-          return 'facet';
+      if (self.selectedMultiq() == 'query') {
+        if (self.qs().length >= 2) {
+          return 'query';
         }
+      } else {
+          var facet = self.getFacetFilter(self.selectedMultiq());
+          if (facet && facet.filter().length > 0) { // todo + histogram there?
+            return 'facet';
+          }
       }
     }
-  return null;
+    return null;
   });
   
   self.selectedMultiq.subscribe(function () { // To keep below the computed
@@ -442,10 +442,18 @@ var Collection = function (vm, collection) {
   self.template.fieldsModalFilter = ko.observable(); // For UI
   self.template.fieldsModalType = ko.observable("");
   self.template.filteredFieldsAttributes = ko.observableArray();
+  self.template.availableWidgetFields = ko.computed(function() {
+    return self.template.fieldsModalType() == 'histogram-widget'? vm.availableDateFields() : self.availableFacetFields();
+  });
+  self.template.availableWidgetFieldsNames = ko.computed(function() {
+	return $.map(self.template.availableWidgetFields(), function(field){
+	  return field.name();
+	});
+  });
   
   self.template.fieldsModalFilter.subscribe(function(value) {
     var _fields = [];
-    var _availableFields = self.template.fieldsModalType() == 'histogram-widget'? vm.availableDateFields() : self.availableFacetFields(); 
+    var _availableFields = self.template.availableWidgetFields();
 
     $.each(_availableFields, function (index, field) {
       if (self.template.fieldsModalFilter() == "" || field.name().toLowerCase().indexOf(self.template.fieldsModalFilter().toLowerCase()) > -1){