New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keep results list open if no results #127

Closed
nop33 opened this Issue Dec 14, 2015 · 9 comments

Comments

Projects
None yet
2 participants
@nop33

nop33 commented Dec 14, 2015

Is there a way to add some kind of "Just use ..." option in the results list and keep the results list open even if there are no results?
Currently I create a new DOM element and I append it in the results list, like in this example:

But if the user keeps adding input and there are no more results to show, the results lists closes, so the "Just use..." option is not visible anymore.
To work around this, I add/remove some css classes of the .typeahead-container element, but this is more of a hack than a solution.
Any idea how this can be implemented?
Thanks

@running-coder

This comment has been minimized.

Owner

running-coder commented Dec 14, 2015

hey Ilias,

you can use the onLayoutBuiltBefore (node, query, result) callback and emptyTemplate: function (query) option

$.typeahead({
    input: "#q",
    // EmptyTemplate doesnt support returning jQuery object for now but this is something I could add
    emptyTemplate: function (query) {
        return "Just use \"" + query + "\""
    },
    callback: {
        onLayoutBuiltBefore: function (node, query, result) {
            return result.append(
                $('<li/>', {
                    "text": "Just use \"" + query + "\"",
                    "class": "my-custom-class"
                })
        }
    }
})
@nop33

This comment has been minimized.

nop33 commented Dec 14, 2015

Thank you, I will give it a try! It would be great if the emptyTemplate could return a jQuery object, then I could have the same function returning the new <li> in both emptyTemplate  and onLayoutBuiltBefore.

@running-coder running-coder added this to the 2.3.0 milestone Dec 14, 2015

@running-coder

This comment has been minimized.

Owner

running-coder commented Dec 14, 2015

my bad I was missing 1 parameter

callback: {
    onLayoutBuiltBefore: function (node, query, result, resultHtmlList) {
        return resultHtmlList.append(
            $('<li/>', {
                "text": "Just use \"" + query + "\"",
                "class": "my-custom-class"
            });
    }
}

running-coder pushed a commit that referenced this issue Dec 14, 2015

tom bertrand
#127 allow ``options.emptyTemplate`` to return a jQuery LI item
emptyTemplate: function (query) {
    return $('<li/>', {
        "text": "Just use \"" + query + "\"",
        "class": "my-custom-class"
    });
}
@running-coder

This comment has been minimized.

Owner

running-coder commented Dec 14, 2015

Should be available in the develop branch until 2.3.0 is released, let me know if it worked as expected

@nop33

This comment has been minimized.

nop33 commented Dec 15, 2015

Thanks for the quick response and fix!

@nop33

This comment has been minimized.

nop33 commented Dec 15, 2015

Hello again,
I didn't want to create a whole new issue to ask a question, so I am simply replying to this one.
As I read in the docs "Extras" section, you can trigger several Typeahead events programmatically, like focus.typeahead etc.. I use focus.typeahead to open the results list programmatically and I also need to be able to close it. Unfortunately none of the mentioned events does that. I tried to trigger an ESC keyup (or focusout) but none of these worked so far.
How can I close the results list?
This question is related with the above issue since I want to close the results list when the user clicks on the "Just use ..." LI

@running-coder

This comment has been minimized.

Owner

running-coder commented Dec 15, 2015

hey, as of #118 it is possible to call any Typeahead / function from any callback using 'this' scope. You can also reach your instance with the technique given in the Extras. The function to close Typeahead is hideLayout(). so somthing like this.hideLayout() from a callback or Typeahead['#q'].hideLayout() from anywhere else

@nop33

This comment has been minimized.

nop33 commented Dec 15, 2015

You are right, I did not think of that! Thanks for the help.

@running-coder

This comment has been minimized.

Owner

running-coder commented Dec 15, 2015

yw

running-coder added a commit that referenced this issue Dec 24, 2015

Version 2.3.0
Features

- Added option ``backdropOnFocus`` will trigger the backdrop option as long as the Typeahead input is focused
- Added ``onShowLayout`` and ``onHideLayout`` callbacks
- ``template`` can now be a function (query, item) that returns a template string
- Added query string sanitization
- Added ``.typeahead-item`` and ``.typeahead-empty`` on list items to easily apply CSS on these LI elements
- #109 ``correlativeTemplate`` can be an array of display keys instead of the complete template
- #111, #127 Added ``filter`` and ``matcher`` options. See the documentation to know the differences and possible return options.
- #115 Added ``e.preventInputChange`` boolean to ``onNavigateBefore`` callback to prevent the input from changing when navigating (arrow up / down) the results
- #118 Every functions and callbacks are now scoped with the Typeahead object, it is possible to use ``this`` to reach the Typeahead variables & functions
- #122 It is now possible to set a custom accent object with ``from`` and ``to``
- #125 Added ``onNavigateAfter`` callback
- #127 ``emptyTemplate`` now accepts a jQuery LI object
- #132 It is now possible to set a function that returns a request object inside ``source.group.url``

Fixes

- Removed ``.show()`` and ``.hide()`` jQuery functions, use the CSS instead!
- Fixed dropdownFilter when clicking outside wouldn't close it
- Fixed jQuery-3.0.0-alpha1 issue, missing the node.selector so using ``options.input`` is now mandatory for using Typeahead['#my-search'] (see extras section in documentation)
- Fixed highlight option when query was empty
- #121 ``selector.hint`` was not being interpreted

running-coder added a commit that referenced this issue Dec 24, 2015

Version 2.3.0
Features

- Added option ``backdropOnFocus`` will trigger the backdrop option as long as the Typeahead input is focused
- Added ``onShowLayout`` and ``onHideLayout`` callbacks
- ``template`` can now be a function (query, item) that returns a template string
- Added query string sanitization
- Added ``.typeahead-item`` and ``.typeahead-empty`` on list items to easily apply CSS on these LI elements
- #109 ``correlativeTemplate`` can be an array of display keys instead of the complete template
- #111, #127 Added ``filter`` and ``matcher`` options. See the documentation to know the differences and possible return options.
- #115 Added ``e.preventInputChange`` boolean to ``onNavigateBefore`` callback to prevent the input from changing when navigating (arrow up / down) the results
- #118 Every functions and callbacks are now scoped with the Typeahead object, it is possible to use ``this`` to reach the Typeahead variables & functions
- #122 It is now possible to set a custom accent object with ``from`` and ``to``
- #125 Added ``onNavigateAfter`` callback
- #127 ``emptyTemplate`` now accepts a jQuery LI object
- #132 It is now possible to set a function that returns a request object inside ``source.group.url``

Fixes

- Removed ``.show()`` and ``.hide()`` jQuery functions, use the CSS instead!
- Fixed dropdownFilter when clicking outside wouldn't close it
- Fixed jQuery-3.0.0-alpha1 issue, missing the node.selector so using ``options.input`` is now mandatory for using Typeahead['#my-search'] (see extras section in documentation)
- Fixed highlight option when query was empty
- #121 ``selector.hint`` was not being interpreted

running-coder added a commit that referenced this issue Dec 24, 2015

Version 2.3.0
Features

- Added option ``backdropOnFocus`` will trigger the backdrop option as long as the Typeahead input is focused
- Added ``onShowLayout`` and ``onHideLayout`` callbacks
- ``template`` can now be a function (query, item) that returns a template string
- Added query string sanitization
- Added ``.typeahead-item`` and ``.typeahead-empty`` on list items to easily apply CSS on these LI elements
- #109 ``correlativeTemplate`` can be an array of display keys instead of the complete template
- #111, #127 Added ``filter`` and ``matcher`` options. See the documentation to know the differences and possible return options.
- #115 Added ``e.preventInputChange`` boolean to ``onNavigateBefore`` callback to prevent the input from changing when navigating (arrow up / down) the results
- #118 Every functions and callbacks are now scoped with the Typeahead object, it is possible to use ``this`` to reach the Typeahead variables & functions
- #122 It is now possible to set a custom accent object with ``from`` and ``to``
- #125 Added ``onNavigateAfter`` callback
- #127 ``emptyTemplate`` now accepts a jQuery LI object
- #132 It is now possible to set a function that returns a request object inside ``source.group.url``

Fixes

- Removed ``.show()`` and ``.hide()`` jQuery functions, use the CSS instead!
- Fixed dropdownFilter when clicking outside wouldn't close it
- Fixed jQuery-3.0.0-alpha1 issue, missing the node.selector so using ``options.input`` is now mandatory for using Typeahead['#my-search'] (see extras section in documentation)
- Fixed highlight option when query was empty
- #121 ``selector.hint`` was not being interpreted

running-coder added a commit that referenced this issue Dec 26, 2015

Version 2.3.0
Features

- Added option ``backdropOnFocus`` will trigger the backdrop option as long as the Typeahead input is focused
- Added ``onShowLayout`` and ``onHideLayout`` callbacks
- ``template`` can now be a function (query, item) that returns a template string
- Added query string sanitization
- Added ``.typeahead-item`` and ``.typeahead-empty`` on list items to easily apply CSS on these LI elements
- Added a resetLayout function
- #109 ``correlativeTemplate`` can be an array of display keys instead of the complete template
- #111, #127 Added ``filter`` and ``matcher`` options. See the documentation to know the differences and possible return options.
- #115 Added ``e.preventInputChange`` boolean to ``onNavigateBefore`` callback to prevent the input from changing when navigating (arrow up / down) the results
- #118 Every functions and callbacks are now scoped with the Typeahead object, it is possible to use ``this`` to reach the Typeahead variables & functions
- #122 It is now possible to set a custom accent object with ``from`` and ``to``
- #125 Added ``onNavigateAfter`` callback
- #127 ``emptyTemplate`` now accepts a jQuery LI object
- #132 It is now possible to set a function that returns a request object inside ``source.group.url``

Fixes

- Removed ``.show()`` and ``.hide()`` jQuery functions, use the CSS instead!
- Fixed dropdownFilter when clicking outside wouldn't close it
- Fixed jQuery-3.0.0-alpha1 issue, missing the node.selector so using ``options.input`` is now mandatory for using Typeahead['#my-search'] (see extras section in documentation)
- Fixed highlight option when query was empty
- Fixed href option where clicking the "a" link wouldn't redirect
- Fixed group search
- #121 ``selector.hint`` was not being interpreted
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment