Easyui模糊查询后显示界面input框

<td>
    <div class="input-group" style="padding:5px 5px 0px 0;width:100%">
             <span style="width:70px;padding:0px 0px" class="input-group-addon">产品名称
             </span>
         <input class="form-control" id="productName" name="productName" data-options="valueField:'productCode',textField:'productName',panelHeight:'auto',panelMaxHeight:200,panelMinHeight:100" style="height: 25px;width:200px;">
     </div>
 </td>

js：

 $(function () {
        //产品名称模糊查询
        $('#productName').combobox({
            required:false,
            url:'${pageContext.request.contextPath}/B01/showProduct',
            editable:true,
            hasDownArrow:false,
            prompt:'手动录入模糊查找',
            filter: function(q, row){
                var opts = $(this).combobox('options');
                return row[opts.textField].indexOf(q) == 0;
            },
            onSelect: function (options) {

            }
        });

    });

controller层

@RequestMapping("/showProduct")
    @ResponseBody
    public List<CustomProductInfo> showProduct(HttpServletRequest request) {

        return  customProductInfoMapper.showAllProductInfo();
    }

mapper.xml

<select id="showAllProductInfo" resultType="com.wood.customentity.CustomProductInfo">
        SELECT
        P.ID,
        P.ProductName,
        P.ProductCode,
        hc.ClassName as ProductClass,
        D1.DictName as CustomSegment,
        D2.DictName as AccountingProportion,
        D3.DictName as ProductUnit
        FROM ProductInfo P LEFT JOIN  HardwareClass hc ON hc.ClassID = P.ProductClass
        left join DictContent D1 on D1.DictNo = P.CustomSegment AND D1.TableID = 'CustomSegment'
        left join DictContent D2 on D2.DictNo = P.AccountingProportion AND D2.TableID = 'AccountingProportion'
        left join DictContent D3 on D3.DictNo = P.ProductUnit AND D3.TableID = 'Unit'
    </select>

效果

注：
//获取名字（input框的值）
var productName =$("#productName").combobox(‘getText’);

//获取数值
var productCode =$("#productName").combobox(‘getValue’);