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

Controlling which fields are shown in the seach box #363

Closed
dave7777 opened this Issue Jul 28, 2017 · 23 comments

Comments

Projects
None yet
2 participants
@dave7777

dave7777 commented Jul 28, 2017

Hello
I have two columns of data and when I scroll up and down the results both of these column elements are MERGED into one an displayed in the search box - where I can disable first column from showing in the search box ?
I have this fillde but it works OK
http://jsfiddle.net/Line7/vw05enbj/
Dave

@running-coder

This comment has been minimized.

Owner

running-coder commented Jul 28, 2017

Hey @dave7777, not sure I understand the issue. Could you add screenshot or more details?

@dave7777

This comment has been minimized.

dave7777 commented Jul 28, 2017

thank you....here is the screenshot of the menu - as you can see both columns are merged in the search box - when I scroll down with keyboard
star2t

@running-coder

This comment has been minimized.

Owner

running-coder commented Jul 28, 2017

Yea this is considered as a "result row"

@dave7777

This comment has been minimized.

dave7777 commented Jul 28, 2017

can it be limited to second column items only?

@running-coder

This comment has been minimized.

Owner

running-coder commented Jul 28, 2017

this was added in 2.8.0

templateValue: null, // Set the input value template when an item is clicked

http://www.runningcoder.org/jquerytypeahead/documentation/#options-templateValue

would this help?

@dave7777

This comment has been minimized.

dave7777 commented Jul 29, 2017

thank you Tom
I have this script....I added the name of the first column into templateValue but it does not work - can you please take a look?

<form>
       <div class="typeahead__container">
           <div class="typeahead__field">

           <span class="typeahead__query">
               <input class="js-typeahead-input"
                      name="q"
                      type="search"
                      placeholder="Search"
                      autofocus
                      autocomplete="off">
           </span></div>
       </div>
   </form>
</div>

<script>

 var myData = [    ];

  $.typeahead({
 input: ".js-typeahead-input",
 minLength: 1,
 maxItemPerGroup: 20,
 maxItem: 20,
 correlativeTemplate: true,
 templateValue: "{{name}}",
 emptyTemplate: 'No result for "{{query}}"',
 source: {
   myGroup: {
   ajax: {
           url: 'search/src/data2.json'
       }, 
     display: ['name', 'descr'] ,
     href: "{{link}}",
      template: '<span class="typeahead__column">{{name}}</span><span class="typeahead__column">{{descr}}</span>'
   }
 },
 group: {
               key: "category",
               template: function (item) {

                   var category = item.category;
                 

                   return category;
               }
           },
 
   dropdownFilter: [{
               key: 'category',
               template: '{{category}}',
       
           }],
           
 callback: {
   onSubmit: function (node, form, item, event) {
     var href;

     if (this.result.length === 1) {
       href = this.result[0].link;
     } else {
       console.log(this.source)

       for (var i=0, ii=this.source.myGroup.length; i<ii; ++i){
         if (this.query.toLowerCase() === this.source.myGroup[i].name.toLowerCase()) {
           href = this.source.myGroup[i].link
           break;
         }
       }
     }

     if (href) {
       event.preventDefault();
       window.location.href = href;
     }
   }
 }
});
</script>



@dave7777

This comment has been minimized.

dave7777 commented Jul 31, 2017

can you please check this code Tom?

@running-coder

This comment has been minimized.

Owner

running-coder commented Jul 31, 2017

hey @dave7777, it works for me using your configuration

var myData = [{
    name: 'hi',
    descr: 'descr'
},
    {
        name: 'hey',
        descr: 'descr'
    }];

$.typeahead({
    input: ".js-typeahead-input",
    minLength: 1,
    maxItemPerGroup: 20,
    maxItem: 20,
    correlativeTemplate: true,
    templateValue: "{{name}}",
    emptyTemplate: 'No result for "{{query}}"',
    source: {
        myGroup: {
            data: myData, // replaced this for testing
            display: ['name', 'descr'] ,
            href: "{{link}}",
            template: '<span class="typeahead__column">{{name}}</span>, <span class="typeahead__column">{{descr}}</span>'
        }
    },

Typing h suggests hi and hey
screen shot 2017-07-31 at 8 25 33 am
clicking hey writes '{{name}}' instead of '{{name}}{{descr}}' in the input using the templateValue
screen shot 2017-07-31 at 8 26 03 am

@dave7777

This comment has been minimized.

dave7777 commented Aug 7, 2017

Thank you for your wonderful help Tom....Sorry to delayed feedback - was reinstalling windows....
Here is the detailed side my side report comparing this code and mine:

https://jsfiddle.net/b66ve8o3/

as you will notice it is mostly same as yours -I wonder if this templateValue is not working because I am using other complex features afterwards/retrieving the results via AJAX?

Can you please take a look?

Thank you again!

Dave

@dave7777

This comment has been minimized.

dave7777 commented Aug 7, 2017

I noticed you have comma here:
template: '{{name}}, {{descr}}'

but adding a comma to this line of mine disrupted the results...:((((

template: '{{name}}{{descr}}'

@running-coder

This comment has been minimized.

Owner

running-coder commented Aug 7, 2017

Was using , in the template so the terms would be seperated ;). I've added a fiddle. https://jsfiddle.net/runningcoder/rauxqosd/2/

@dave7777

This comment has been minimized.

dave7777 commented Aug 7, 2017

thank you so much Tom! 👍

I see you are using
templateValue: "{{name}}",

and still you have two names from each column shown when I scroll down with the keyboard (EG heya descr).....not sure why this code is not working:

templateValue: "{{name}}",

can you please take a look?

@running-coder

This comment has been minimized.

Owner

running-coder commented Aug 7, 2017

oh! this is a mistake, I've forgot to consider the templateValue when using the navigation (arrows, tab) and not only the click 👍

@running-coder running-coder added Bug and removed Support labels Aug 7, 2017

@dave7777

This comment has been minimized.

dave7777 commented Aug 7, 2017

thank you Tom!.......do you think there can be a quick fix for this? - maybe even a space between the results (I have two columns) on KEYBOARD SCROLL DOWN OR UP?

@dave7777

This comment has been minimized.

dave7777 commented Aug 8, 2017

I mean in your example it has the SPACE between results when scrolling - how did you do that?:) I checked the codes and they are identical....

@dave7777

This comment has been minimized.

dave7777 commented Aug 8, 2017

maybe my results are merged on scroll down and up because I have this css:

		.typeahead__column {
  width: 30%;
  display: inline-block;
}

.typeahead__column:last-child {
	  width: 70%;
  text-align: left;
}

	</style>
@dave7777

This comment has been minimized.

dave7777 commented Aug 8, 2017

I uploaded all of your code in my website and it still does nto show space between the results:

Image and video hosting by TinyPic

MAYBE SOME CCS style might be preventing this from showing?

@running-coder

This comment has been minimized.

Owner

running-coder commented Aug 8, 2017

oh.. took me a while to remember... that's a change from #351, not yet released on master...

@dave7777

This comment has been minimized.

dave7777 commented Aug 8, 2017

Thank you Tom - meaning the current code will not support this?

running-coder added a commit that referenced this issue Aug 8, 2017

Fix #363 templateValue option when navigating
The option was not considered when using the arrow or tab navigation
@running-coder

This comment has been minimized.

Owner

running-coder commented Aug 8, 2017

I've added a commit to fix the arrow and tab navigation on the develop branch, can you validate that this is solved?

@running-coder running-coder added this to the 2.9.0 milestone Aug 8, 2017

running-coder added a commit that referenced this issue Aug 8, 2017

Fix #363 templateValue option when navigating
The option was not considered when using the arrow or tab navigation

@dave7777 dave7777 closed this Aug 9, 2017

@dave7777

This comment has been minimized.

dave7777 commented Aug 9, 2017

when do you plan to release 2.9.0 ?

@dave7777 dave7777 reopened this Aug 9, 2017

@running-coder

This comment has been minimized.

Owner

running-coder commented Aug 9, 2017

2.9.0 is not ready to be released, there are a bunch of things I need to figure out before... if you are using NPM you can always use the commit hash to pull from the registry

running-coder added a commit that referenced this issue Aug 18, 2017

Version 2.9.0
Feature
- #306 Allow Typeahead to be initialized on <textarea> and <div> with content editable

Fixes
- #363 `templateValue` option when navigating
- #360 Safari pressing Tab brings back to the first tabbable item
- #355 XSS issue with emptyTemplate when no results found
- #351 htmlEntities inside correlativeTemplate
- #311 When `href` option is set, pressing Enter should follow the link

Improvement
- #326 Improve Up / Down / Tab navigation to have only 1 "selected" item
@dave7777

This comment has been minimized.

dave7777 commented Jul 2, 2018

Hello Tom - I am preparing to launch a special platform based on our search script - this issue still shwos up whn scrollign the serach box - can it be corrected now?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment