I have not learned the front end, so this article is destined to swim. Usually, what technology needs to use what language, I just go to learn, learn also not necessarily master, just can't remember! So now understand, learning, or to overcome the difficult times, must be recorded, and not necessarily show what the high technology, but to restore their own mental process enough. We all know that the recent stock market is very hot, of course, these days are adjusting the period of the day, oh, God car re-license to surrender the daily limit of one day to drop the answer to the hearse, compared to 528 vertical roller coaster, not familiar. Although many people do not devote a lot of energy to the stock market, but still always pay attention to the market, workers can not always stare at the phone to see it, so I think of the stock plug-in, Chrome browser (361 speed browser OK) in the stock plugin https://chrome.google.com/ webstore/detail/%e8%82%a1%e7%a5%a8%e6%8f%90%e9%86%92%e5%8a%a9%e6%89%8b/goiffchdhlcehhgdpdbocefkohlhmlom#, This thing can add optional stocks, and almost in real-time through the Sina Finance synchronization (that is, look at the number is relieved), after the trial found quite interesting, so try to get the source code, the plug-in all html/js/css/image files are downloaded, and follow the chrome plug-in development tutorial to the file structure, manifest are step-by-step, now in GitHub Open Source: Https://github.com/hustlbj/chrome-extensions warehouse Stockhelper. A brief introduction to this small plug-in: In the browser plugin bar icon is background.html, real-time acquisition of the price of the selected shares, and then refresh to the icon and title, Popup.html is the click on the icon to pop up the details page, you can see the price of each stock line chart, daily chart, Details such as volume, select a stock, the current price of the stock will be refreshed in real-time to the icon; options.html is to click on the option to open the page, the addition of optional shares to delete, enter the name, shorthand, code can be found. Its stock code is stored in a stocks.js file, we add a new stock input part of the letter, we will execute AutoComplete to automatically search for the stock in the matching stock.js and then present us with a list of options, which is the auto-populated function, such as:so the problem is, save the candidate data in a local file (variable), although the retrieval speed, but the IPO will have to update the plug-in version, or you add the code to stocks.js, although not difficult, but I can for the vast number of small White said can't endure. Well, since the source code is all done, fix a small bug is also the way, do not repair uncomfortable skinner.
To view the source code, options.html is quoted in jquery 1.7autocomplete 1.1 (note that the new AutoComplete parameter list may be different, No discussion here) default parameters: We look at how AutoComplete is used (input is for a box object): Input.autocomplete (Stockinfos, {Omit many parameter settings, formatitem:function () {}, Fomatmatch:function () {}, Formatresult:function () {}}). result (function () {}). Obviously, Stockinfos is the candidate data source that is read from the local file, the format correlation function is how to match the automatic completion, and the final result is the display work that the interface needs to do when a candidate is selected.
First, you need to address
How to replace a local static data source Stockinfos with a remote data source as a candidate data source for AutoComplete (this article does not explore local variables as a data source: )。 Do not know how to do, search, reference http://www.cnblogs.com/weixing/archive/2013/06/06/3120535.html Remote Data source call method,It is important to note that the Jquery.autocomplete or the Jquery.ui version is incorrect, and may not be the parameter settings, such as the new version of jquery. AutoComplete http://api.jqueryui.com/autocomplete/in the UI, we stillUsing AutoComplete 1.1, look at the source is best not to use min version. The method of modification is to replace the first parameter Stockinfos with the one above when calling AutoComplete.URL, while settingDataTypeparameter, which is required when you need to pass parameters to the remoteExtraparamsparameter, if the data format returned by the remote is not suitable for AutoComplete, we also need toCustomizing the parse function。 Then I changed to the following (http://suggest3.sinajs.cn/suggest/key= your search, this is the interface provided by Sina, similar to many, there is no detail here):
Run in the browser, when you enter a few words in the input box, autocomplete to the remote URL request data, in the browser console network interface, found the request and response data, and the response data and we directly in the browser to access the content of the URL, such as http:// Suggest3.sinajs.cn/suggest/?q=shang&limit=10×tamp=1433840697966&key=shang,In addition to the key field is required for our remote URL lookup, AutoComplete automatically adds the Q, limit, timestamp parameters，but the data received (the response of the browser console output var suggestvalue= "Shanghai Ind h,31,00363,00363, Shanghai Industrial Holdings, Shsykg;shanghai Tonva ... is correct) after not executing the parse function and subsequent format-related functions。
Troubleshooting: First check the AutoComplete source code (do not look at min.js, download the corresponding version of AutoComplete source), open this file discovery, autocomplete parameter list: delay, scroll, highlight, There are parameters such as Max, Minchar, DataType, Extraparams, and so on, Formatitem, and the parse function, but it does not seem to perform parse (). In AutoCompletethe original parse function, we do some log debugging: The parse function we customized when we called AutoComplete, because the browser console did not output the log of the custom parse, so the function did not execute. The original parse () function was not executed.
And then according to AutoComplete source to trace,the function calling parse is the request function, that is, according to the URL parameter to the remote request, because the browser console has requests and responses, so the request function is definitely executed, analysis of its source code,after Ajax sends a request, executes the handler for the Success label if successful，There is no error handler for this., guessing that the error response was received, so did not execute the success, we added the error handler: Watch it run in the browser console, as I expected in the error handler: Sure enough, the AJAX request received a return that was judged to be the wrong type, Therefore, the success processing function is not executed. The request response headers is as follows:The content-type of the headers that found the response was text/html, and the datatype type we set when we called AutoComplete was JSON, apparently conflicting (can't blindly copy someone else's code!). or according to their own actual situation! ), so the request function considers that the received information is incorrect, so no success processing is performed and no Parse () function is executed.
Solution: When calling AutoComplete,datatype ParametersDepending on your data source type, such as myThe data source returns text/html, not JSON, so I'm changing to text here .。 Execute again: The custom parse function was executed successfully. Here, my parse function parsing also has bugs, so the parsed returned array is empty, please do not care, according to the original data to do the adjustment processing.after parsing the parse function successfully, construct an array parsed return, where the parse function returns [Object, object, object, ...] As follows:
The Formatitem function is then executed: the console reports that item is undefined, and Item.name also reported uncaught typeerror:cannot read property ' name ' of undefined error. One problem solved, another problem came ...
Troubleshoot and resolve parse () parsing source data (incorrect data format, undefined error): Continue to track autocomplete source code,The request function executes the parse function in the success handler and the result is stored in the parsed variable., and then call the success (term, parsed) function, the success () function is the function that is passed in when invoking the request function See Request statement function request (term, success, failure). Keep track of where the request was called, one for the request in search (value, Findvaluecallback, Findvaluecallback) and the otherrequest in the OnChange () function (CurrentValue, Receivedata, Hideresultsnow), in both places Console.log ("search") and Console.log ("OnChange"), re-run in the browser, found that the console output OnChange, indicating that thethe onchange function calls request to initiate requests, process return results, and so on.。 Therefore, after executing the parse function, the request invokes the passed-inReveicedatafunction, continue to trace the Receivedata function, in the function Console.log ("Receivedata"), you can also output DATA[0], re-run found that the output receivedata and data[0] and no error. Receivedata (q, data) calls Select.display (data, Q), and the display also hits the Console.log ("display") output log, which calls the Init () function and the filllist () function , there is no data processing related code in INIT, so we are concerned about filllist (). Enter the Filllist () function and hit the Console.log ("filllist") output log as a function trace. Not hard to find,The filllist () function does some processing of our parse data and then passes it to the Formatitem function ., the entire path is basically complete. Observe how it calls the Formatitem function:
var formatted = Options.formatitem (Data[i].data, i+1, Max, Data[i].value, term);And our data format is:
data is an array, data[i] indexes the elements in the array, while Data[i].data is undefined！ So when we first called AutoComplete, Formatitem (item, I, Max) received three parameters Data[i].data, i+1, Max, and Data[i].data was undefined, So the Formatitem times out item.name undefined error!! OK, the troubleshooting phase has finally finished!The problem is that the data returned by parse does not conform to the fulllist () function in the operation for data! So, modify the custom parse function:
Run again in the browser, success!
Finally, summarize the execution flow of AutoComplete (): Call $ (your input box) in your JS. AutoComplete (Local Data source or remote URL, {argument list, Datatype:json or text, etc., Extrap arams:{Parameter name: function () {return parameter value such as $ (your input box). Val ()}, Parse:function () {}, Format correlation function,}). Result (function () {}); then, when you enter in the input box, AutoComplete calls the OnChange function->request () function to send a request->parse () function to the URL to process the remote data and then produce an array [{data:{}, value{}}, {...}, {...}, {...}, ...] Receiverdata (), Filllist (), Formatitem ().
Anyway, thanks to the stock reminder assistant provided by 710, want to study the classmate to my GitHub download can https://github.com/hustlbj/chrome-extensions
A murder caused by the stock reminder helper plugin--shallow into the jquery autocomplete
