Textbox with filter which include value and text search

Dear experts:
Our need textbox with filter which include value and text search
<div id="multiple-datasets">
    <input class="typeahead" type="text">
</div>
Furthermore, when the user has focus on the textbox nothing will be displayed as user starts typing the filtered results will be displayed.

The current data looks like:
Value      Text
ABC             My Academy big company
DEF,GHI  Sample company with multiple associated values
XYZ             Zoombie

The ideal solution should use typeahead, bootstrap and jquery. The following link seems close to what is needed but it does not have a complete solution:
https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/262

For example if I  click on the text box nothing is displayed as I type "a" then first two company Text show up. Notice that the value is hidden.
Note: We already tried a drop down with search (bootstrap select) but the issue we have is that we can not restrict the all descriptions display when the drop down have focus.

Thanks,
LVL 36
Miguel OzSoftware EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
So basically you want to implement a Typeahead
0
Miguel OzSoftware EngineerAuthor Commented:
Basically what is needed is sample code (e.g JS fiddle) for Scrollable Dropdown Menu searchable by both text and and value without displaying the value.
In the link sample provided imagine countries have country code, so the user can type USA or United States and get the result in the drop down.
0
Julian HansenCommented:
You can do this with a typeahead using a hidden input.

The process is like this
(From here: https://stackoverflow.com/questions/31284593/twitter-typeahead-different-value-to-display)
<input type="text" class="typeahead">
<input type="hidden" name="yourfieldnere" id="customer_identity" />

$('.typeahead').typeahead(null, {
  ....
}).bind('typeahead:select', function(ev, suggestion) {
  $('#company_identity').val(suggestion.identity);
});

Open in new window

This is also discussed here
https://github.com/twitter/typeahead.js/issues/1453
With reference to this fiddle
https://jsfiddle.net/alfredopacino/xgLcesc5/4/
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Miguel OzSoftware EngineerAuthor Commented:
The JSFiddle mentioned in your answer does not solve our purpose, it shows both value and text, whereas our requirement is to search on both but not to display the value.
The stack overflow does not work either, it is not searching by value.

Note: We are using jquery 1.10.2 and typeahead 2.10.4 wuth suggestion library running coder.
0
Julian HansenCommented:
Can you post your code for the first one.
If it is showing the value - then simply hide that with CSS
0
Miguel OzSoftware EngineerAuthor Commented:
Have tried hiding the value it does not work
0
Miguel OzSoftware EngineerAuthor Commented:
This code works:
function setupIssuerTypeAheadHandler(inputSelector, dataToSearch) {
    $.typeahead({
        input: inputSelector,
        minLength: 3,
        templateValue: "{{Text}}",
        display: ["Text", "Subtext"],
        emptyTemplate: 'No results for "{{query}}"',
        template: '<span><span class="myName" id="{{Value}}">{{Text}}</span></span>',
        callback: {
            onClickAfter: function (node, a, item, event) {
			//do some processing here
            }
        },
        source: {
            Issuer: {
                data: dataToSearch
            }
        }
    });
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Miguel OzSoftware EngineerAuthor Commented:
This code works as I expected
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.