dnauck / angular-advanced-searchbox Goto Github PK

is there a npm module for this angular-advanced-searchbox?

regards
harish

The default template appears without search Params and this error is thrown. The css and tpls files are loaded correctly.

Hello,
I am trying to translate placeholder text like this

<nit-advanced-searchbox ng-model="searchParams.content" placeholder="{{'order.home.searchLabel' | translate}}"></nit-advanced-searchbox>

but it doesn't work. How can I do this?

Thank you for your help.

Hello,

Can we logically group these search params into multiples,

For ex, Transaction, Party, All

On clicking there group items, it should provide the related search-params instead of everything.

When a search param is selected, the list of data is shown only when I start typing. Would it also be possible to list everything when nothing is keyed in.

Only tested it with angular-bootstrap~1.0.0 and the autocompletion feature stopped working. Rolling back to angular-bootstrap#0.13.0 did the trick.

Versions
angular: 1.2.17
angular-advanced-searchbox: ~1.0.0

Any idea?

Removing the search param from input field, does not remove from object

I tried to remove a particular search param from input field, by clicking on trash button and it gets removed. However, when I access the particular search param in searchParams object (which is passed in directive), the search param that I removed still exists. Note that in my case, I have separate submit button to submit queries.

But interestingly, if I click using the mouse on the input field after removing the search param, it works as expected - the search param is removed. Until a mouse click is done, searchParam object still has the search param.

I picked up the updates for Issue #7 that you implemented. They worked, but I may have found a bug:

If I load a saved search, parameters that aren't in the loaded search don't get cleared out. These screenshots show after I load the "exclude" : "Exclude" search, then the "author" : "Erik" and "query" : "BOOM!" parameters didn't get cleared out.

Hello! We need to be able to pull the input type of the current search parameter from a config so that the appropriate keyboard will be triggered on tablets. Input type "number" automatically triggers the numeric keyboard, and input type "text" triggers the alpha keyboard.

Can someone help me solve this issue?

Is it possible to change the component so that it also shows the suggested values for the parameters not only the parameters. So after typing city it shows me the possible values of the city. Just like http://documentcloud.github.io/visualsearch/ .
Also, I know that an issue has been fixed where when a parameter can only be specified once but in my case I want to specify multiple values for the parameters and at the back-end an "OR" clause will be applied for all the values. How easy is it to do that ?

Thank you

Any thoughts on an implementation for ng-material using chips?

Very nice search solution - solves the screen space/ugly custom form issue!

Refer the image. When searching by free text ( kind of tag ) it is not coming as the other predefined values

Look at below. Similar things are implemented in AWS Console. here in second image "search" is not any predefined parameter. It is just free text

Long query string only shows partial text:

Is there a way to change this to show the full query string text? Please see the attached screenshot.

Notice the tail of the 'g', 'q', and 'y' characters are cut off in the text box too. If you know how to fix that, that'd be really great too. Thank you!

Mouse click on a search parameter to edit the value doesn't seem to be working for me in Firefox or Chrome. It does set editMode to "true" but also seems to blur or lose focus right away.

I am seeing a pattern with my users where first they start entering search word and then they see the parameters, so they click on the search parameter. When they do that the search parameter is not taking the value already entered before.
In the below screenshot. The user entered "Microsoft" and clicked on company parameter. it is creating space for parameter value and the user now has to delete the Microsoft at other place and put it in the parameter value box. can we make it such a way that when user clicks on a parameter, it take the value from the "query" to the parameter and clears the query?

1. Click on a search suggestion.
2. Type a letter in the search field, then backspace to erase it.
3. Type backspace again. The search suggestion field disappears. The larger search box is no longer in focus.
4. Type backspace again. This causes the browser to navigate back to the previous page. This happens to me pretty often.

Is there a way that the larger search field could stay in focus after search parameter fields disappear? This would prevent an extra backspace from navigating to the previous page.

Thank you for making this available.

it is below the level of key

If you use all of your configured search keys the popover with parameter suggestions appears over the content following the searchbox. Note the Output: header when the following example runs out of parameters.

Plunk showing the issue - http://plnkr.co/edit/ptjrr11S41sJXxbxLa8G?p=preview

Hello,

Seems there is a problem with the latest angular. From their release notes, some non-assignable variables are not longer tolerated and an exception is thrown.

Error: [CE Error] [$compile:nonassign] Expression 'undefined' used with directive 'nitAdvancedSearchbox' is non-assignable!
http://errors.angularjs.org/1.4.9/$compile/nonassign?p0=undefined&p1=nitAdvancedSearchbox
    at http://localhost:3000/bower_components/angular/angular.js:68:12
    at parentSet (http://localhost:3000/bower_components/angular/angular.js:9092:21)
    at parentValueWatch (http://localhost:3000/bower_components/angular/angular.js:9105:19)
    at Object.regularInterceptedExpression (http://localhost:3000/bower_components/angular/angular.js:14646:16)
    at Scope.$digest (http://localhost:3000/bower_components/angular/angular.js:16087:40)
    at Scope.$apply (http://localhost:3000/bower_components/angular/angular.js:16359:24)
    at done (http://localhost:3000/bower_components/angular/angular.js:10791:47)
    at completeRequest (http://localhost:3000/bower_components/angular/angular.js:10989:7)
    at XMLHttpRequest.requestLoaded (http://localhost:3000/bower_components/angular/angular.js:10930:9) undefined

When I do a JSPM install I'm getting: http://www.screencast.com/t/S0FO6p3S

Its complaining that there is no main entry point detected. I noticed in your main its pointing to the src file too instead of the dist. I think most things point at dist file but i could be wrong.

I picked up your latest changes from Issue #9 fixes, but I don't think they fixed the issue I was seeing. Here are some screenshots of the search box after I assigned new values to it. This shows the old boxes weren't cleared out. (Example: Author)

My application allow a user to "Save Searches" and then later load them up for editing, export, or whatever.

The save/load part works, and I can set $scope.searchParams. The assignment seems fine. If I display searchParams in the UI, it shows the expected json string:
{{searchParams | json}}

The search box doesn't update with the searchParams data that is loaded. Is there a way to make the input search box load up the search parameters that are assigned to $scope.searchParams?

Example "Load Saved Search" function that executes on button click:

$scope.loadSavedSearch = function () {
    $scope.searchParams = $scope.loadSavedSearchSelected.SearchParameters;
}

Thank you.

Could you please support date-picker and date and time-picker from bootstrap so that it will be easy to select date if it is date attribute

I had this code working to watch changes on searchParams. It was working with previous versions of angular-advanced-searchbox. My code was receiving a call when searchParams changed by user actions. Then, my code would call a Url to show some search result samples.

This stopped working with the latest angular-advanced-searchbox js file. Is that a bug, or is there a new way to accomplish watching the searchParams changes?
Thank you.

Hello, and thank you for your work.

I know it is on your todo list from what I saw in the code but I tried to do it myself and can't figure out how to do it right.

First, in my controller I changed the $scope.availableSearchParams array by adding a boolean like this :

$scope.availableSearchParams = [
                {key: "name", name: "Name", placeholder: "Name...", isUsed: false},
                {key: "type", name: "Type", placeholder: "Type...", isUsed: false},
                {key: "year", name: "Year", placeholder: "Year...", isUsed: false},
                {key: "area", name: "Area", placeholder: "Sector...", isUsed: false},
                {key: "status", name: "Status", placeholder: "Status...", isUsed: false}
            ];

Then I'm trying to edit you $scope.addSearchParam(...) function in order to set isUsed to true when I push a new search parameter into $scope.searchParams and to edit your $scope.removeSearchParam(...) function to set it back to false but I can't manage to access $scope.availableSearchParams.

But now I'm thinking, even if I could, in order to hide a parameter, we should remove it from $scope.availableSearchParams, right ? Unless we can use isUsed for each parameter with a ng-show in the html ?

In the end, I'm a bit lost, am I getting it all wrong and trying to do it with a bad logic ?
Are you still working on this aspect of the project ?

My code is:

html:
<nit-advanced-searchbox ng-model="searchParams" parameters="availableSearchParams" placeholder="Cerca..." parameters-label="suggerimento parametri"> </nit-advanced-searchbox>

js:
$scope.searchParams = {};

$scope.availableSearchParams = [ { key: "id", name: "ID", placeholder: "ID..." }, { key: "acquisto", name: "Acquistato il", placeholder: "Acquistato il..." }, { key: "nome", name: "Nome cliente", placeholder: "Nome cliente..." }, { key: "importo", name: "Importo", placeholder: "Importo..." }, { key: "quantita", name: "Quantità", placeholder: "Quantità..." }, { key: "spedizione", name: "Spedizione", placeholder: "Spedizione..." }, { key: "stato", name: "Stato", placeholder: "Stato..." } ];

but it return me this error: https://docs.angularjs.org/error/$compile/ctreq?p0=ngModel&p1=key

it seems to need something else.

Hi
First of all i love your search concept, its one of the best i ever saw. I validated your control for my project and for this it is necessary that it's running on tablets. In Ios 9.1 in safari, the search text is outside of the "search concept", see screenshot. If we can fix it, I definitely integration your control in my project.

Cheers
Tobias

I'm using angular v1.4.6 and I'm having trouble getting this directive to work. I've followed all the steps on the README to include the directive.

If I don't include jQuery, I get the following error:

angular.js:12450 Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element http://errors.angularjs.org/1.4.6/jqLite/nosel at http://localhost:9091/javascripts/angular.js:68:12 at Object.JQLite [as element] (http://localhost:9091/javascripts/angular.js:2780:13) at link (http://localhost:9091/javascripts/angular-advanced-searchbox-tpls.min.js:7:5039) at http://localhost:9091/javascripts/angular.js:8774:44 at invokeLinkFn (http://localhost:9091/javascripts/angular.js:8780:9) at nodeLinkFn (http://localhost:9091/javascripts/angular.js:8280:11) at compositeLinkFn (http://localhost:9091/javascripts/angular.js:7671:13) at compositeLinkFn (http://localhost:9091/javascripts/angular.js:7675:13) at nodeLinkFn (http://localhost:9091/javascripts/angular.js:8275:24) at http://localhost:9091/javascripts/angular.js:8510:13 <input name="searchbox" class="search-parameter-input ng-pristine ng-untouched ng-valid ng-isolate-scope" nit-auto-size-input="" nit-set-focus="setSearchFocus" ng-keydown="keydown($event)" placeholder="{{placeholder}}" ng-focus="focus = true" ng-blur="focus = false" typeahead-on-select="searchQueryTypeaheadOnSelect($item, $model, $label)" typeahead="parameter as parameter.name for parameter in parameters | filter:isUnsedParameter | filter:{name:$viewValue} | limitTo:parametersDisplayLimit" ng-change="searchQueryChanged(searchQuery)" ng-model="searchQuery">

When I include jQuery in my website, the error goes away, but the autocomplete for parameter suggestions doesn't work. Is jQuery required for this directive? Is a different version of angular required? Have you ever seen this error before?

Im trying this but dont show like the example.

In the controller

  $searchParams= ["value", "id"];

In my view

<nit-advanced-searchbox
    ng-model="searchModel"
    parameters="searchParams"
    placeholder="Search...">
</nit-advanced-searchbox>

I got this

Is there a way to search for properties of nested objects?

Clicking on trash can icon before you have entered parameter search text does not remove the parameter. Instead if removed the input field and you have to click on the trash can again to remove the parameter.

Pretty minor, but annoying :)

Hi, I am using Flask in the backend and would like to use Advanced Search box. Could you please state dependencies? A tutorial would also help!

It would be extremely helpful to be able to search by date properties via datetimepicker. Is this functionality already available?

I tried this directive but ran into an issue with submitting my search. Seems like, as you start typing in the search box, the "ng-model" variable changes. What i want to do is: submit search when user has entered a value. I tried it by putting a watch on the "ng-model" variable, but that didn't work. Any ideas?

Is this behaviour intended, if I supply suggestedValues with restrictToSuggestedValue set to false and I type some text that matches a suggested value pressing enter autocompletes that matching value - means its convoluted to enter a partially matching string. For example to pass l in the example below I have to press escape then enter.

See http://plnkr.co/edit/uE8IPffRWwRuqwQSTWy9?p=preview for example.

We have a submit button to do the search. After a search, when a user removes a particular search param by using the trash button, I do not get any noficiation. So if the user does not click the search button again, the user will have a impression that now the filter is removed, but in reality the filter is still present but in the UI the filter is removed.

It would be very helpful if we can get notification when a search param is removed

To edit a search param on click you have to add the Stop Propagation in html code(line 13) as you can see below:
ng-click="enterEditMode($index);$event.stopPropagation();".

Bye Bye

Hi I had a problem since the anagular-advance-searchbox is referencing a pretty old version of angulat-bootstrap, which is anyway not referencing the official bower repository (https://github.com/angular-ui/bootstrap-bower)

Instead of using the dependency "angular-bootstrap" it should be using angular-ui-bootstrap-bower"

The ng-blur on the input with name = "value" fires also when you click onto the word you are typing. I want the input to leave the edit mode only when you click OUT of the input bar

Hello,

I intalled the last version (1.1.1) with bower. but this one don't work correctly like your demo (1.0.0). The problem is when I clic in the middle of the search component, the component don't take the focus. I found the difference, you have change the template angular-advanced-searchbox.html between the two versions. More precisely, you have remove ng-click="!focus ? setSearchFocus = true : null"
Are there a reason? Can you generate a new version with correction?

If I want override this template, what is the best practice?
I wanted add this line in a personal .js file, is it good? :

angular.module('angular-advanced-searchbox').run(['$templateCache', function($templateCache) {
  'use strict';
  $templateCache.put('angular-advanced-searchbox.html',
    "<div class=advancedSearchBox ......</div>"
  );
}]);

Thank you

Angularjs version 1.5.7
Bootstrap version 1.3.3

Getting this error using availableParams as (ctrl is valid)

Error: $compile:ctreq
Missing Required Controller
Controller 'ngModel', required by directive 'key', can't be found

ctrl.availableSearchParams = [
    { key: "name", name: "Name", placeholder: "Name..." },
    { key: "city", name: "City", placeholder: "City...", restrictToSuggestedValues: true, suggestedValues: ['Berlin', 'London', 'Paris'] },
    { key: "country", name: "Country", placeholder: "Country..." },
    { key: "emailAddress", name: "E-Mail", placeholder: "E-Mail...", allowMultiple: true },
    { key: "job", name: "Job", placeholder: "Job..." }
];

instead of

ctrl.availableSearchParams = [];

that works but only with "query" parameter.

I'm unable to reproduce it on jsfiddle or plunkr.

Is it possible to pass an array of objects to suggestedValues instead and show a particular property of the object in typeahead?

Could you please also push the other attributes of an object to search param, that will be used for some functionality in the below code
Ex: alias, typeOf,
$scope.searchParams.push(
{
key: searchParam.key,
name: searchParam.name,
type: searchParam.type || 'text',
placeholder: searchParam.placeholder,
suggestedValues: searchParam.suggestedValues || [],
restrictToSuggestedValues: searchParam.restrictToSuggestedValues || false,
value: value || ''
}
)

Is only 1 of each parameter type allowed intentional or something that can be fixed up?

As seen in the screen shot, if I add 3 Name parameters, then only 1 Name parameter is in the Output json. Thank you.

Hi,

The advance searchbox component is a very interesting component. Thanks a lot!

In order to fully exploit the potential of the searchbox, I think some extension points could be very useful:

The following extensions come to my mind:

1. easy overriding of classes of the searchbox
2. easy overriding of the remove/delete icon class. Depending on context/web project some rigid L&F style guides would require an specific icon.
3. Overriding the template-url (Default: 'dist/angular-advanced-searchbox.html'). In case some needs more structure changes to the HTML.
4. Overriding the "Parameter Suggestions" text. Sometimes you may want to use something different or also localize it to other language. for example tile="{{'Title in spanish'} | translate}"
5. Generic way how to add other types of parameters/filters (like date, integer, float, list/selectbox)
6. Generic way how to add validation.

Does it make sense ?

If help is needed I think I could spend some efforts to add some of them.

• Click into the searchbar
• Fill in something
• Click somewhere else (outside of the searchbar)
• Try to click into the searchbar again (only clicking on the input-text works)

It's there since v2.2.0

Just a thought that it would be cool if you had the functionality to turn your output object into an OData query string (using $filter).

OData Filter Doc

Hey, I started using this for a live search and ran into a problem, I couldn't make it work.

I'm not sure if it works out of the box with ng-repeat | filter: searchParams, but even if I made some mistake, it wouldn't behave as I wanted to.
Lets assume and object with 'name' and 'description' as properties:

• I want to be able to filter by each property;
• if you type something on the name field that is only in the description, it should NOT return results;
• if you type directly on the search bar without any properties, it should make a full search and return any matches;
• if you use both, it will match each property to each searchField, and also make a full search and join the results.

Keep in mind that it should never return results that match only partially with the search. Only if they match all the properties.

I created a custom filter to do that. If you think it is something you'd like to integrate in the project just let me know and I'll send you a PR.