类似于铁道部12306的城市选择框的实现

第一次写,有点小紧张。。。

这两天研究铁道部的余票查询系统,参考网上大牛们的经典案例,也有了一些自己的心得,写在自己程序猿的道路上记录一下,也和大家一起分享,写的不好莫怪,大牛可以自动过滤,非喜勿喷,谢谢~

今天先简单的介绍一下城市选择框的实现,与12306官网有一点差距,上图,先看看效果:

    

如图所示,支持拼音首字母查询,全拼音查询,汉字查询等

好了,现在谈一谈我是怎么实现的

首先是准备工作:

  我们需要把城市的信息存入我们的数据库中,城市数据来源:https://kyfw.12306.cn/otn/resources/js/framework/station_name.js?station_version=1.8241

  分析一下里面的数据,发现是有固定格式的,这就好办了是吧,我们可以用程序的方式来取出每条记录并存入数据库,当然咯,闲的蛋疼的程序猿们完全可以自己手动加入数据库,数据嘛,我看了一下,不是很多,2367条而已,还是可以试试的嘛

  找到数据以后,将他存为本地txt文件,记得修改文件编码方式为utf-8,不然小心乱码哟~

  剩下的就是导入了,在c#中读取txt文件,然后split(‘@‘),得到如图的数据组:,再对每一条数据split(‘|‘),相信接下来怎么操作不需要我说了吧,导入数据库的时间可能会有点久吧,大概在几十秒的样子,程序也有可能会死掉一会儿,耐心的等等,他会活过来的,要相信自己写的程序可是很坚强的!

准备工作完了就是文本框的实现咯:

  讲讲我的思路吧:拉一个textBox文本框和一个listBox,设置textBox的TextChanged事件,在事件中获取textBox的text值,利用数据库的通配符在数据库中进行查找,将返回的数据组一条条显示在listBox中,然后设置listBox的MouseClick事件即可,废话不多说,上代码:

textBox的TextChanged事件代码:

private void fromStationText_TextChanged(object sender, EventArgs e)
        {
            this.listBox1.Items.Clear();
            if (this.fromStationText.Text == "")
            {
                this.listBox1.Visible = false;
            }
            else
            {
                this.listBox1.Visible = true;
                string key = this.fromStationText.Text;
                string strWhere = " where c_Spy like ‘" + key + "%‘ or c_name like ‘" + key + "%‘ or c_Fpy like ‘" + key + "%‘ ";
                List<string> list = new List<string>();
                list = CityInfoHelper.nameSelect(strWhere);
                int i = 0;
                for(i = 0;i < list.Count;i++)
                {
                    this.listBox1.Items.Add(list[i]);
                }
            }
        }

listBox的MouseClick事件代码:

private void listBox1_MouseClick(object sender, MouseEventArgs e)
        {
            this.fromStationText.Text = this.listBox1.Text;
            this.listBox1.Visible = false;
        }

至于数据库的操作,我就不在这里贴出来~

简单的城市选择框就完成了,当然还有很多可以改进的地方,例如说那个listBox是否可以换作别的控件之类的,我也会继续完善这个,有喜欢研究的朋友也可以帮忙研究一下,大家一起讨论学习。

结束语

第一次写,真的紧张,写的不好,非喜勿喷,本文介绍的城市选择文本框的实现过程,代码需要自行研究修改,如有需要源码的也可以留言。

新手文章,大神可以自动忽略,转载请注明出处哟!

时间: 2024-11-04 09:59:11

类似于铁道部12306的城市选择框的实现的相关文章

12306城市选择框

点击查看效果 1.页面结构: <div style="width: 26%;margin:100px auto;"> 城市拼音:<input type="text" id="txt_value" /><br/> <br/> <div class="yxcdv1" style="width: 100%;"> <div class="a

城市选择之搜索框

新项目要做城市选择,效果图出来,用系统的搜索框达不到效果图的效果,设置searchBarStyle属性时,UISearchBarStyleDefault时设置barTintColor后边框会有黑线,设置UISearchBarStyleMinimal时无黑线单文本框颜色不符合要求.所以就自定义了下.先看下效果图 上面两个效果图的区别就是下面的图有个城市和图片.所以就封装到一个类中.只是TextField的LeftView变化.还有个问题就是城市名长短不一,设置城市的时候要进行重绘,所以我在set城

《今天你买到票了吗?——从铁道部12306.cn站点漫谈电子商务站点的“海量事务快速处理”系统》

<今天你买到票了吗?--从铁道部12306.cn站点漫谈电子商务站点的"海量事务快速处理"系统> 首发地址: http://bbs.hpx-party.org/thread-8488-1-1.html .一万四千字电子商务站点干货贴,贯穿产品.研发.运维三大领域,没有耐心读完的读者慎入,另外,本文不是教你怎样订到车票的. 相关文章: 不能简单套用"实物电商系统"对"大型票务系统"做需求分析 "大型票务系统"和&qu

安卓组件------列表选择框

安卓提供的列表选择框(Spinner)相当于web端用户注册时的选择下拉框,比如注册候选择省份城市等.如下图便是一个列表选择框 下拉列表的列表选择项能够通过xml文件的android:entries属性指定,或是在java代码中导入,属性android:prompt是列表项的标题. 一    列表项数据:       实际运用当中,很多下拉列表项的数据实际是可知的,可以放在xml资源文件中.这时,开发者可以通过xml属性进行指定数据. 除了资源文件之外,开发者还能够使用适配器适配数据源.(适配器

基于jquery的城市选择插件

城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. 1 /* 2 *基于jquery的城市选择插件 3 *author:youziclub 4 *2015-4-22 5 */ 6 ;(function($){ 7 $.fn.city=function(options){ 8 // 城市信息 9 var nav=['热门','A-G','H-L','M-T','W-Z','其他']; 10 var

基于jQuery美化联动下拉选择框

今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="container"> <div class="inner"> <section id="main_content"

android wheelview实现三级城市选择

很早之前看淘宝就有了ios那种的城市选择控件,当时也看到网友有分享,不过那个写的很烂,后来(大概是去年吧),我们公司有这么一个项目,当时用的还是网上比较流行的那个黑框的那个,感觉特别的丑,然后我在那个开源的wheelview的基础上做封装,用户只需要专心数据的组装即可,然后填充就行,其他的可以不必考虑. 先上下效果图 接下来说下我的思路:网络请求-数据返回-设置数据-数据填充控件 接下来直接按上面的流程直接上代码: 网络请求我用的本地的json数据 String address = Utils.

jquery下拉城市选择代码

非常好的下拉城市选择代码,可选择热门城市,按字母排序的城市选择,带搜索框样式. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery下拉框美化特效-素材吧</title> <meta http-equiv="X-UA-Compatible" content=&quo

前端插件之Bootstrap Switch 选择框开关控制

简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款插件,所以,在引入之前要先引入Bootstrap样式 <link rel="stylesheet" type="text/css" href="/static/plugin/bootstrap/css/bootstrap.min.css">