I am trying to implement an autocompletion like Stack Overflow does for tag completion. however, I tried to view the source and its minified
I am trying to get features like letting the user add any tag, if it exists in the list then fine, or else add it to the database.
Are there examples out there that would show how to get something like this done? or can I somehow view the non minified version of the source?
I don't know exactly how to do it, but. .. .
if you look into this answer: jQueryUI: how can I custom-format the Autocomplete plug-in results?
you can see there's a way to fiddle with jQuery's rendering logic to change how the menu items appear. There's also an internal jQuery function called renderMenu that actually presents the choices.
I haven't tried this but I suppose that by opening up that black box, and either replacing or rejiggering renderMenu and its related functions, you'd be able to do what you want - render just one item, in the actual textbox.
That is where I would start, anyway.
EDIT
I looked into the autocomplete stuff again in jQuery UI. It seems pretty straightforward to replace the menu display logic by inserting a custom response() function.
Here's what I did:
// display the first item in the list of possible completions
var myResponse = function( items ) {
var itemToSuggest, p1, p2;
if (items.length === 0) {return;}
itemToSuggest = items[0];
this.element.val( itemToSuggest );
p1 = this.term.length;
p2 = itemToSuggest.length;
setSelectionRange(this.element[0], p1, p2);
};
var oldFn = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = myResponse;
Working example
You can look into jQuery UI Autocomplete.
The complete source code is available in their Git repository.
Probably something like Chosen would do the job nicely
http://harvesthq.github.com/chosen/
Use the autofocus of the jQuery UI Autocomplete. This should automatically focus on the first found item in the list.
Auto focus
Related
I am doing a school project that is a Movie lookup app connected to guidebox API. I am using Materialize CSS and trying to organize the information into their tabs system. They are added dynamically so the documentation says to initialize in javascript. It says to use:
$(document).ready(function(){
$('ul.tabs').tabs();
});
However that doesn't work for me I guess since the tabs are not present at Doc Ready thaey are not pushed into the DOM until a submit request. I put just the
$('ul.tabs').tabs();
into a few places in my code and the best result was it working on the first movie returned on each search but for each subsequent return item the tabs break.
I could use some guidance on whether I can plug that in somewhere to make my existing code work.
https://github.com/jasonboru/group_project1_guidebox.git
There are some missing ending tags in your dynamically created dom elements.
Apart this, in this file assets/js/logic.js the following there are the following two lines:
$('.guidebox-search-results').append(movieResult);
$('ul.tabs').tabs();
That menas, whenever you add new tabs element you initialize them.
The mistake I see is: in this way you initialize every tabs not only the new one. And, because you have already initilized the old one I can suggest you to rewrite the previous two lines in this format:
$('.guidebox-search-results').append(movieResult);
$('.guidebox-search-results').find('ul.tabs').tabs();
You can bind on every event, when node inserted in dom and after that, do with it what you want.
$(document).bind('DOMNodeInserted', function(e) {
var element = e.target;
});
I’m using onsen ui version 1, followed https://onsen.io/v1/guide.html to make changes to DOM
This section to be exact
// Add another Onsen UI element
var content = document.getElementById("my-content");
content.innerHTML="<ons-button>Another Button</ons-button>";
ons.compile(content);
The problem is nothing changed on the page.
If i dump “content” variable or dump the HTML element it shows the newly edited version on browser console. but on page still the old one.
ons object is instantiated, compile method is callable, tried different HTML elements.
Either you are doing something incorrectly or it's an angular refresh issue.
For the first scenario it's easier if you provide a codepen, so that we can see the problem. Currently the code you are mentioning is working fine for me here.
For the second scenario actually the third line ons.compile(content); should remove this problem imo, it might be a version issue, or there is some context which I am missing.
If you're doing something angular related then you should also show where you are calling these 3 lines from. In order to work it should be called from something like an ng- event (for example ng-click).
JS:
app.controller('yourControllerName', function($scope) {
$scope.addButton = function () {
var content = document.getElementById("my-content");
content.innerHTML="<ons-button>Another Button</ons-button>";
ons.compile(content);
}
});
HTML:
<ons-button ng-click="addButton()">Add another button</ons-button>
Finally if you are unable to make it work you can do something like
app.controller('yourControllerName', function($scope) {
$scope.addButton = function () {
var content = document.getElementById("my-content");
content.innerHTML="<ons-button>Another Button</ons-button>";
ons.compile(content);
$scope.apply(); // should fix the issue, but not recommended
}
});
PS: You can also try out onsen 2 - there you can:
experiment with the interactive tutorial
try out the vanilla version (without any external framework) - which will not have issues like this one
SOLVED:
Final fiddle:
http://jsfiddle.net/AcfUz/220/
*used the selector indicated in the chosen answer and moved the console.log value ahead of the text input the selected options were to be listed in and boom--working as it should!
Please reference this fiddle:
http://jsfiddle.net/AcfUz/218/
jQuery(document).on('click', '#go', function() {
console.log("woo");
var selMulti = jQuery.map(jQuery("#inf_custom_Choosealocation_select :selected"), function(e) {
return jQuery(e).val();
console.log("hoo");
});
//var selMulti = jQuery("#inf_custom_Choosealocation_select :selected").val();
console.log(selMulti + "hmm...");
console.log("hootie");
//jQuery("#inf_custom_Choosealocation").val(selMulti.join(", "));
jQuery("#inf_custom_Choosealocation").val(selMulti);
console.log("who");
});
This works perfectly on fiddle but no matter how many iterations I try it won't work on the live site. The variable containing the desired values is always empty. I can't for the life of me figure out why?????
Can anyone shed some light in my hour of desperation? It's been 7 hours and I need to solve this before the morning.
I suppose to expand on this--the code in the fiddle is the code I include in the site. The form and then the script before the closing body tag. The form is dynamically loaded (takes about a second). What I need to accomplish is grabbing whatever values a user selects from any of the multi select fields (I'm starting with the one) and copy those as a comma separated list into another single line text input. The fiddle works splendidly, but I'm coming up empty on the live site. I just returns blank/empty--it doesn't give me any console errors what so ever (save for a missing img) and I can see my console.log checkpoints.
Here is the live link:
http://goo.gl/ll1Hz4
On the live website if I try $("#inf_custom_Choosealocation_select option") in the console, the options are listed twice. Using $('select') 2 #inf_custom_Choosealocation_select are returned. (although I didn't see 2 instances in the page source) ($("#inf_custom_Choosealocation_select"); returns one, but that uses getElementbyID and skips the search). Perhaps the second select is created by some sort of overlay?
All in all, I didn't search any further where the 2nd select come from. A quick fix would be to use a selector searching the attribute. The following selector worked while testing on the live site:
$("select[id=inf_custom_Choosealocation_select] :selected")
But that might be only a temporary work around. You'll probably want to find the ghost select culprit too ;)
You are not using jQuery map in fiddle, where as you have jquery map in your live code...
Try to update your live site with the code you have in fiddle.
Live Code: (has jQuery map)
So, yeah, I am not sure why :selected isn't working in your case, but you can try to go through the options and check manually... jQuery("#inf_custom_Choosealocation_select option").each(function(i, o){ console.log(o.selected) })
Try wrapping your code inside
jQuery(document).ready(function(){});
Instead of using
var selMulti = jQuery.map(jQuery("#inf_custom_Choosealocation_select :selected"), function(e) {
return jQuery(e).val();
console.log("hoo");
});
use
var selMulti=jQuery("#inf_custom_Choosealocation_select").val();
Tinymce stops working if on the same page I use the selectmenu from https://github.com/fnagel/jquery-ui
Tinymce with default configuration
and selectmenu:
$('select.flags').selectmenu();
EDIT:
The problem is that on the page with tinymce i dont load the script for the selectmenu function. Should I remove it from the js that runs all the functions or is there any way to modify it to run only if the function exists and will be able to be ran
Here is an easy way to make 'function does not exist' problems go away.
$.fn.selectmenu = $.fn.selectmenu || $.noop
$('select.jquery_smenu').selectmenu(); //do what you will
or you could do it like this:
if( $.fn.selectmenu ){
$('select.jquery_smenu').selectmenu(); //do what you will
}
for the record, function does not exist or var is not a function is a javascript problem more than a jQuery one. Hope this helps!
Is tiny working with this script added to the page, but not initialized for the selects?
You apply selectmenu to every single select on your page.
tinymce uses selects and your surely don't want to change these.
Give your selects a class like
<select class="jquery_smenu"> ....
and change your selector:
$('select.jquery_smenu').selectmenu();
I can not test if thats the reason why tiny stops working, but you should change that.
I'm using the niceforms plugin to style my select box. The problem I'm having is that I can't get the right javascript code to activate the links placed in the value option.
The niceforms site (http://www.emblematiq.com/lab/niceforms/help/) instructs me to use the following code:
el.lnk._onclick = el.onclick || function () {
if(this.ref.oldClassName == "NFOnChange") {
//insert your code here
}};
This is my attempt at manipulating the code to allow url linking in the select drop down
el.lnk._onclick = el.onclick || function () {
if(this.ref.oldClassName == "NFOnChange") {
//code i added
window.location.href = $(this.ref).val();
}};
The PROBLEM is the links do not work as expected, they do not link to their corresponding values.
form class ="niceform"
select class ="NFOnchange"
option value = "http://link1.com" -> link1.com
option value = "http://link2.com" -> link2.com
option value = "http://link3.com" -> link3.com
Please any help with this would be appreciated. I just need to insert the right bit of code to make the links correspond to their option values.
Ok, first off "$" is used by almost every major JS library, so:
window.location.href = $(this.ref).val();
means nothing unless you tell us which JS library you are using.
If you are using jQuery, val() should work. I would confirm that $this.ref) is actually what you think it is by adding this right before that line:
console.log($(this.ref))
(the above assumes you use Firebug or the Chrome developer console ... if you're not using one of these tools, you should be ;-))
If that shows that you are actually selecting a SELECT element, then something funny is going on, but I suspect it isn't.
Also, as a side note I think you can probably just do:
$(this)
if you're using jQuery.
If you're not using jQuery ... tell us what you are using, and we can go from there.
Oh, and if you're not using any library, and $ is just your own custom function, then Felix was correct in pointing out that JS has no built in "value()" method on elements. The closest you will find is .selectedIndex, which is a property of any SELECT element that tells you the index (out of all of the options) of the selected option (and then by looking at the list of available options you can tell the ".value" property of the appropriate one).