JQuery :: Autocomplete - Simulate A Select Box Where Displayed Value Is One Thing And Submitted Value Is Another?
Oct 5, 2009
how to use the autocomplete jQuery plugin best to my needs. I'm looking to replace a select box with the Autocomplete plugin, but not quite sure how to accomplish this. In my select box, I have the option that is displayed is not the same as the data that is submitted.
ex: <option value="123">This is Displayed </option> However, with the autocomplete, since it is using a textbox, the values that are displayed, are submitted. Do I have to hack around using hidden fields to accomplish this type of behaviour?
In my application,there are several autocomplte field is available.When I type "pank" and then it list out the several matching in the autocomplete field and select one and then hit the enter then it submitted the entire form, which will cause the error message. Because there are several more mandatory field are there, which i need to fill up.I was trying to restrict in this way, but i believe this is the wrong way.
So I have a nice little hand rolled Ajax call to my server pulling a list from the database and displaying it in a drop down list dependant on the user input. Aka Google suggest. I am wondering if the quickest way to do this is to call the database each time with Ajax and search the results with the input, or to write an xml from the database and search that. Then when the Database is updated rewrite the xml file.
Am I underestimating MYSQL again? Or not, and I feel it would be good practice to write the xml file because it will essentially mean a lot less database calls. But I don�t know how fast searching an xml file would be in comparison to a db call. The results from the database are say 500 entries anywhere between 10 - 100 characters each. I want to know A. The best way to do this B. Lets say the site will have pretty high traffic so I am looking for it to be as tweeked as possible. I can test but thought at the end of my week it was worth seeing what peoples advice is.
<SCRIPT LANGUAGE="JavaScript"> <!-- function JumpToIt(list) { var newPage = list.options[list.selectedIndex].value if (newPage != "None") { location.href=newPage } } //--> </SCRIPT>
Which in turn selects an option from the original dropdown.
Works fine except.....
The options in the select call scripts that open new browser windows, and when this occurs popup blockers swing into action and block the new window. When I originally had the javascript calls as plain links such as [HREF="javascript:onCreatePrintable()"] the popup was not blocked since it was obvious that user was clicking the link. Now that I'm trying to save much needed space by putting these links into a dropdown, the popup blockers are not recognizing the user selection.... I guess. I was thinking the javascript could somehow simulate an onClick to alleviate the problem. Any suggestions?
I have autocomplete showing up where I type into the textbox but when I try to select one with my mouse or keyboard it does not fill in the textbox with the option selected. Code is below. < script type="text/javascript"> $( function() {[code]....
I have a autocomplete box using this plugin[URL]... Returns results no problem. I can't get my head round how to add an event when a selection is made. Basically when someone selects one of the autocomplete options I want to redirect to a specific page (index.php?cms&p=tpl&s=edit&tplid='id of selected option')
I'm using jquery autocomplete to fill a textbox with some text but I need to get the ID of the item too. For this purpose I thought to use the on select event to fill an hidden field the problem is that the on select event is never fired.
Does anyone have a library or patch to call a handler if a user leaves an autocomplete field without choosing one of the autocomplete options - i.e. they've entered free text. I'm working with an app that populates multiple fields from a single auto-complete value, and our latest requirement is to clear out a bunch of fields if the user's entered something manually - rejecting autocomplete suggestions. My initial attempts at hooking into onkeyfoo and onblur haven't lead anywhere productive, and I'm hoping someone else has managed to overcome the gnarly event and timing dependencies involved with onkeyfoo and blur being used for standard autocomplete behaviour.
Ok, here's a recent version of a script I've been playing with. Essentially, it 'autocompletes' a selection list. What I would like to know is what browsers & which versions it works / crashes on.
Please note it includes new properties for the selection list (userWord & userWord2) and a method within the autoSelect() object
If you decide to swipe the code for your own use -- go ahead -- but please keep my name & url there -- I'm hoping to get it up on my site with full explanation before the end of the weekend.
Test by find "New York" (spaces important) It times out, and backspace resets.....
The name list is now getting huge and I would like to allow my admins to be able to type in the first few letters of a buyers name and have the select form "find" what the admin is entering. But I need the value of the buyer to be passed as the buyer's id for DB purposes.
I found a script on these forums that actually does what I want using a <select> field, but there is one little annoyance with it. Whenever a letter key is pressed, the <select> finds the first occurrence of the letter (as usual with a <select> field). It does come back immediately, but it doesn't look good when you are typing through the options and it keeps flashing from one to the other. Code:
I have a big dropdown box with lots of items in it. It takes about 5 seconds to load in IE6. How can I use jQuery to load rest of the page, and then load the dropdown last? Right now, the dropdown load freezes the entire page until it loads.
it seems like an amazing tool once I figure out what I'm doing wrong. I'm using the awesome datePicker plugin, but am just not getting something right. I can't seem to be able to get datepicker to do more than one thing.To help myself figure out what Im doing wrong, I created a very simple example:
basically i have this menu system which works using a couple of jquery scripts it all works fine etc, but now i am porting my site into a joomla design ( dont ask why just a challange )at the moment i have a module on the left which has my menu in and on the right is another module which loads the content depending on the outcome of the script:at the moment what ihave done is not the finished product as i would like to make sure that this will work before moving to the next part of my scriptbefore i go on and on and on ill show you what i have:
I have found two jquery plugins and i am trying to combine an action but to no avail. what i want to do is after selecting an item from the auto complete box i would like for it then to do a change function and retrieve details. Here are my 2 pieces of code.
I have read all the reason why DOM purists don't like document.write and innerHTML. I would like to be a good programmer and do the right thing and not use them. But I need your help to get it to what the project needs done.
In the interest of brevity, the following code has been simplified. You'll notice sDoc contains HTML and JavaScript, this is a unchangeable requirement. PLEASE don't waste your time or mine by explaining how un-couth it is. I know it is but there's nothing I can do about. Answers strictly focused what can be done versus what should be done will be greatly appreciated.
There are three attempted methods to render the sDoc. The first one is to create a textNode and append it to a div. It prints the code as text instead of rendering it, as expected. Is it possible to get it to render?
The second method uses innerHTML and the HTML is rendered but not the JavasScript.
The third method uses document.write which renders both the HTML and JavaScript, but we really really don't want to use the write method, but at this point it looks like we have no choice.
We've even tried to render sDoc in a DOM created iFrame, but it chokes in Mozilla browsers because of the known bug of included scripts that use document.write (once again another requirement that can't be changed) kills the page as document.close fails.
How do I simulate a ESC key without user intervention? For example I want the ESC key be executed in the background when a page loads or a user clicks on a link? Is it possible in jQuery?
I know there are ways to validate what key was pressed on the keyboard using .keypress but I am looking for something like 'SENDKEYS'
Under PHP control, I am loading an <img> tag with one thing or another. I'm trying to work my way towards not changing the actual tag beyond what is already there (don't mess with the HTML).
The HTML is:
Code:
I am switching the image src path to something totally different. A such, I need to have the browser remove the alt and title attributes. I do this by loading the following in the {SRC} placeholder:
Code:
Using FF2.0.0.20, View Generated Output, I see that these attributes are indeed gone. Yet, the browser still shows (definitely) the alt attribute and (probably) the other attributes as well. I have also confirmed this happens with FF4.0.1-Portable.
I have a keypad that inserts a number into a div (simulates pin number). How do i create a "backspace" or delete button that will remove the last character added.[code]...
In my jsfiddle I have an application where the user can select an option and their answers and then display it in a new row. I have one slight problem though, I think it will be easier to explain if you follow the steps below in my [fiddle][1]:
1. Open the grid and select option "3". "3" would be displayed in the textbox and buttons "A" to "C" would appear
3. Click on "Add Question" button. This would create a new row showing the details you have submitted.
4. Now click on the "Open Grid" WITHIN THE ROW you have justmcreated and select option "5". Now the textbox within the row changes the value from "3" to "5" but if you look at the top where you first chose your options and answers, it displays 5 buttons from "A" to "E".
This should not happen. This should stay to what it was previously which was buttons "A" to "C". it should only change if the option is chosen from the Option Type at the top and not within the row.
I have set up a disclaimer page for our public access PCs at our Libraries which has the following function:
function breach() { alert("Proceeding beyond these Conditions is..................... If you have read the Conditions, scroll to the bottom and press the 'Yes I
agree' button.") window.location="disclaim.htm"
and then in the body tag I have onunload=breach() This works fine for all websites entered into the address bar except if
you enter www.google.com
What it is supposed to do is bring up the prompt and when you click on the OK button it will go back to the disclaimer page. They should only be able to get to the web by clicking on the 'Yes I agree' button at the bottom of the disclaimer page. Does anyone out there know why google doesn't fire up the disclaim.htm page like all the other sites? It is very frustrating.
I use the plugin jquery.contextMenu.js to open a custom popup menu when a user right click to a specific html element. Nox, I want to show this popup menu when a simple onclick event occurs in a specific element. I have see that JQuery propose trigger method but there is no oncontextmenu event !
I have a div i would like to present and while it is presented i would like to disable everything else behind (like what modal dialog does). I'de like to write it myself and not use a plugin, is it hard to do?
I'm trying to change the value of an input field (target) which depends on another input (source). It works well when I manually change the source value. But if I changed the source value with another button, the target value remains the same.
Here's the code...
$(document).ready(function() { $('input#change').click(function() { $('input#source').attr('value', 'This is the value changed by a button');
[Code].....
So how could the target input detect if there's a change within the source input without manually changing it's value?
