jquery finds list values in real time via the input box

In the project, sometimes needs the user to select the city, but the city is too many, the user chooses is not very convenient, therefore provides a user can enter the city's Chinese character or the pinyin abbreviation through the input box. The results are as follows:

When you enter pinyin, the results are as follows:

The implementation code is as follows:

The project is as follows: http://download.csdn.net/download/zl544434558/9198539
Another reminder of the pits encountered:
1, when I want to implement in the input box real-time query list values, think of the first scenario is to use Ajax, but think about the value of the discovery list is basically fixed, why not once loaded out, so the background code changed a bit, all the city details loaded out.
2, the input box value changes need to trigger events, my first idea is to use onchange, but in fact onchange is the input box value changes and the input box loses focus, so I finally used the KeyUp. KeyUp test on the computer is no problem, but at the end, how does not take effect. The KeyUp is then replaced with the final bind (' Input PropertyChange ', function () {}.
3, in determining whether the city character contains the characters in the input box, I use the CONTAINS function, under the Firefox test without any problems, but in chrome and the client does not take effect. Finally, contains is replaced with IndexOf.
jquery finds list values in real time via the input box